レスポンシブデザインでグーグル広告も切り替える

レスポンシブWebデザインは画面の横幅に応じて最適な表示にすることができて便利ですが、グーグルアドセンス広告の切り替えは広告コードの改変が必要で、従来はプログラムポリシー違反となる場合がありできませんでした。これは横幅でグーグル広告を切り替える方法です。

PHPを使ってスマートフォンだけ広告コードを切り替える方法

ユーザーエージェントで判定して、PHPを使えばスマートフォン楽天だけ広告コードを切り替えることは可能でした。しかし、PHPなどを使うことなく広告を切り替えるのはプログラムポリシー違反となる場合があり、今まではできませんでした。

この、スマートフォンだけ広告コードを切り替える方法は「スマートフォン対応ページの作り方」に書いています。

改変が認められたグーグルアドセンスコード

レスポンシブ・ウェブデザインで認められたAdSense広告コードの改変は次の通りです。これを解説したグーグルのページは次の通りです。「AdSense 広告コードの修正」

これを利用してレスポンシブデザインページの広告を切り替えることができるようになりました。(2013年6月)

<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
    width = document.documentElement.clientWidth;
    google_ad_slot = "1234567890";
    google_ad_width = 320;
    google_ad_height = 50;
        if (width > 500) {
        google_ad_slot = "3456789012";
        google_ad_width = 468;
        google_ad_height = 60;
    }
    if (width > 800) {
        google_ad_slot = "2345678901";
        google_ad_width = 728;
       google_ad_height = 90;
    }

</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

この上の例は、幅が800ピクセルより広ければad_slot"2345678901"の広告を表示します。幅が800ピクセル未満で500ピクセルより広ければad_slot"3456789012"の広告を表示します。そして幅が500ピクセル未満ならad_slot"1234567890"の広告を表示するという意味です。

また、タグ(コード)の最小化も認められていますので、半角のスペースや改行やタブやコメントの挿入や削除も認められていると見ることができます。

実際の広告コードの書き換え1

私は画面の幅が900ピクセルの時、メイン画面の横幅は約710ピクセルになります。これを堺にして468ピクセルと728ピクセルの広告を切り替えてみました。つまり、広告の横幅が約3パーセント隠れたら横幅の小さい広告になるようにしてみました。次の場合はリンクユニットの例です。

<script type="text/javascript">
google_ad_client = "pub-****************";
width = document.documentElement.clientWidth;
google_ad_slot = "0123456789";
google_ad_width = 468;
google_ad_height = 15;
if (width > 900) {
google_ad_slot = "1234567890";
google_ad_width = 728;
google_ad_height = 15;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

実際の広告コードの書き換え2(レスポンシブ広告)

私はスマートフォンなどで画面の横幅が339ピクセル以下の時、300x250ピクセルの広告が表示されて、横幅340ピクセル以上の時は336x280ピクセルの広告が表示されるようにしてみました。これは、最近のスマートフォンは横幅360ピクセルのものが主流だからです

この広告コードは最近のレスポンシブ広告で取得したもので、非同期コードになっています。

<style>
.クラス名{width:300px;height:250px;}
@media(min-width:340px){.クラス名{width:336px;height:280px;}}
</style>
<ins class="adsbygoogle クラス名"
style="display:inline-block"
data-ad-client="ca-pub-****************"
data-ad-slot="1234567890"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

広告はリアルタイムには切り替わりません

レスポンシブウェブデザインでは、画面の幅を変えていくと、それに応じて画面が切り替わりますが、このグーグルの広告は切り替わることはありません。つまり、画面の幅を変更したら、画面を更新してやらないと広告は切り替わりません。この辺は、PHPで広告を切り替えるのと同様です。

結果

私はこれを利用して横長のビッグバナー広告とレクタングル広告も切り替えるようにしてみました。完全とはいきませんが、なかなか良い感じに広告の切り替えができたと思っています。

今まで広告コードの改変は厳しく制限されていましたが、グーグルが今回広告コードの改変を一部認めたのは画期的なことです。これを利用して最適な広告が出るようにできるので、色々と試してみたいと思っています。

私は、スマートフォンではPHPを使って、スマートフォン用に広告の切り替えや外部CSSの切り替えもやっています。広告が切り替わって表示されると同時に、デザインも切り替えています。お気づきの点がありましたらお知らせくださると嬉しく思います。