Google AdSenseの広告コードを改変してレスポンシブに対応させる方法

Google AdSenseの広告コードを改変する行為はポリシー違反でしたが、特定の場合のみコードの改変が許されるようになりました。

具体的には、以下の場合は広告コードをカスタマイズしてもOKということです。

改変OK

レスポンシブデザイン
A/Bテスト
動的にカスタムチャネルを設定する
広告タグを最小化する

今後も改変NG

以下のような改変は今後も NG です。

広告ユニットを隠す（display:none など）
コンテンツを覆い隠すような方法で AdSense 広告コードを設定する
何らかの方法で 1 ページに 4 つ以上の AdSense 広告ユニットを表示する
非表示キーワード、iframe、その他の方法を使用して広告表示を操作する
メールやソフトウェアで広告を配信する
広告ユニットをフロート表示させ、ユーザーの注意を不当に引き付ける

それぞれの詳細は公式ヘルプのAdSense 広告コードの修正をご参照いただくとして、この記事ではレスポンシブデザイン用にコードをカスタマイズする方法を紹介したいと思います。

スポンサードリンク

AdSenseの広告をレスポンシブに対応させる

レスポンシブデザインを採用しているサイトは多いと思いますが、Google AdSense の広告をレスポンシブに対応させるには、以下のようにコードをカスタマイズする必要があります。


<script type="text/javascript">
 google_ad_client = "ca-サイト運営者ID";
 width = document.documentElement.clientWidth;
 google_ad_slot = "広告ID";
 google_ad_width = 320;
 google_ad_height = 50;
 if (width > 500) {
 google_ad_slot = "広告ID";
 google_ad_width = 468;
 google_ad_height = 60;
 }
 if (width > 800) {
 google_ad_slot = "広告ID";
 google_ad_width = 728;
 google_ad_height = 90;
 }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

コードを細かく見てみましょう。

以下の部分には、AdSense の運営者IDを入れます。


google_ad_client = "ca-サイト運営者ID";

運営者IDは AdSense の管理画面にログインすると、右上に表示される pub-0123456789 といった数字のことです。

次に以下の箇所ですが、この部分には一番小さいサイズのデバイスに表示させたい広告サイズを入力します。


width = document.documentElement.clientWidth;
google_ad_slot = "広告ID";
google_ad_width = 320;
google_ad_height = 50;

広告IDは、AdSense 管理画面の [広告の設定] タブから確認できます。モザイクだらけで見にくいですね・・・

「google_ad_slot = “広告ID”;」に表示させたい広告のIDを入力して、ad_width と ad_height に広告のサイズを入力します。

続いて以下の箇所ですが、ここには横幅が 500px 以上の時に表示させたい広告サイズを入力します。


if (width > 500) {
google_ad_slot = "広告ID";
google_ad_width = 468;
google_ad_height = 60;
}
if (width > 800) {
google_ad_slot = "広告ID";
google_ad_width = 728;
google_ad_height = 90;
}

「if (width > 500」の数字を変更すれば、広告サイズを変更する横幅を調整することができます。広告IDや ad_width、ad_height は先ほどと同じ要領で入力してください。

「if (width > 800)」以下では、横幅が 800px 以上の時に表示させる広告サイズを指定します。

このように横幅や広告サイズは、環境に合わせて適宜変更してください。

具体的な設置例

例えば、、、

スマートフォンには 300×250 の広告
500px 以上のデバイスには 468×60 の広告
800px 以上のデバイスには 728×90 の広告

このような条件で表示させる広告を分けたい場合は、以下のように記述します。


<script type="text/javascript">
 google_ad_client = "ca-pub-1234567890123456";
 width = document.documentElement.clientWidth;
 google_ad_slot = "0123456789";
 google_ad_width = 300;
 google_ad_height = 250;
 if (width > 500) {
 google_ad_slot = "0123456789";
 google_ad_width = 468;
 google_ad_height = 60;
 }
 if (width > 800) {
 google_ad_slot = "0123456789";
 google_ad_width = 728;
 google_ad_height = 90;
 }
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

あとがき

「運営者ID」「広告ID」「サイズ」を変更すれば、あとはコピペでいいので楽に設置できますね。

WordPress の場合、条件分岐タグを使って表示させる広告を切り替えるのが一般的だったと思いますが、広告コードが改変できるようになったことで AdSense 側の調整で完結できるようになったのはうれしいですね。

サイトにレスポンシブデザインを採用している方はぜひ試してみてください。

Google AdSenseの広告コードを改変してレスポンシブに対応させる方法