B Memo

2014/05/15

アドセンスをPC・スマホで切り替えて擬似レスポンシブにする方法


1年ほど前にアドセンスのポリシーが改定されてタグ改変ができるようになりました。それによってモニタサイズによるアドセンス広告の切り替えが可能になったので今更ですがメモ。


方法

詳しくは下記サイトを参考にしました。いやぁわかりやすくてホントありがたいです。
Google Adsenseがレスポンシブデザインでも柔軟に利用可能にポリシー改訂!Webサイトの収益を更に効率化しよう! by okaoka.net

やり方は簡単。
アドセンス貼ってるところを下記タグに変えるだけ。
<script type="text/javascript">
    google_ad_client = "自分のAdsenseのID";
    width = document.documentElement.clientWidth;
    google_ad_slot = "デフォルトとなるad_slotのID";
    google_ad_width = デフォルトとなるad_slotの幅;
    google_ad_height = デフォルトとなるad_slotの高さ;
   /* ↓分岐↓ */
    if (width > 500) {
        google_ad_slot = "ad_slotのID";
        google_ad_width = 300;
        google_ad_height = 250;
    }
   /* ↓更に分岐したい場合↓ */
    if (width > 800) {
        google_ad_slot = "ad_slotのID";
        google_ad_width = 300;
       google_ad_height = 600;
    }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
if (width > 800)でモニタサイズを指定できます。この場合だと800より大きいときはこの広告サイズ、ということ。なお表示窓のサイズを縮小してもリロードしないと切り替わりません。

レスポンス対応にしているサイトでスマホ表示すると、広告サイズがでかくてでしゃばってて嫌だったのです。この改変のおかげでスマートに見せることが出来ました。