[Google Adsense]記事途中(記事中)広告のレスポンシブ対応(スマホ画面表示)について考える!

前回、記事の途中に広告を挿入する手順をご紹介しました。⇒ [Google Adsense]記事途中に広告挿入!「moreタグ」部分に広告を挿入する方式を採用しました!

ここで問題になってくるのが、WordPressなんかでレスポンシブ対応のテーマを使っている場合の、PC画面とスマホ画面での広告サイズについての対応です。

通常のPC画面だったら「336×280」の大きな広告を貼って、スマホとかの画面だったら「300×250」の中サイズの広告を表示したいと考えますよね!

PCサイズの「336×280」の広告を記事下に追加したら、スマホの画面では広告が大きすぎてはみ出してしまいます。かといってスマホ対応の「300×250」を追加すると、PCの画面では小さすぎて目立たないといったジレンマに陥ってしまいます。

そこで登場するのが「レスポンシブ対応」の広告サイズになります。

しかしこれをそのまま貼ればいいって訳ではありません。思った通りのサイズを表示するかは、広告の貼り付け位置&Google頼みになってしまいます。(CSSで調整すればコントロールできますが・・・)

基本的にAdsense広告のコードの改変は認められていませんが、レスポンシブ対応のコードでは、限定的にコードの修正が許可されているんです。

細かく設定する方法が、[Google Adsense]のヘルプページ「CSSを使って正確なサイズを指定する場合」で紹介されています。

各種端末でのレスポンシブ サイトに最適な広告ユニットの正確なサイズがわかれば、CSS3 メディアクエリを使ってレスポンシブ広告ユニットのサイズを設定することができます。CSS3 メディアクエリを使用するよう広告コードを修正する方法については、次の例をご覧ください。

<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

修正箇所は、以下の赤部分になります。
===============================================
<style type="text/css">
.adslot_1 { width: 300px; height: 250px; } ← モバイルの広告サイズ設定
@media (min-width:500px) { .adslot_1 { width: 336px; height: 280px; } } ← 画面が500px以下の場合のサイズ
@media (min-width:800px) { .adslot_1 { width: 336px; height: 280px; } }
← 画面が500px以下の場合のサイズ
</style>
<ins class="adsbygoogle adslot_1"
style="display:inline-block;"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

===============================================

注意)GoogleAdesenseのプログラムポリシーでは、コードの修正は限定的にしか許可されていません。柔軟な操作が可能ですが、広告の配置に関するポリシーに違反しないように十分ご注意ください。

これでPC画面では「336×280」の広告表示。スマホ画面では「300×250」の広告が表示されるようになります。

「function.php」の中で条件分岐する方法がWEB上にありましたが、私の環境ではうまく動作せず(させきらず)今回この方法を採用しました。

この方法の欠点あげるとすると、これまでPCとスマホで分けて収益管理を行っていた場合においては、広告の配置場所での収益は把握出来るのですが、PC画面の広告がクリックされたのか?スマホ画面でクリックされたのかが判別出来なくなります。

まあこればっかりは仕方ないですね!誰かいい方法がありましたらご教示願います。

スポンサーリンク

Facebookアカウントでコメントする!

コメントを残す

サブコンテンツ

このページの先頭へ