AdSense(アドセンス)広告のコードを直接改変してレスポンシブウェブデザインに対応させてみる

この記事の所要時間は約 6分です。

Google AdSense(以下、アドセンス)広告の規約が一部変更になったようです。

スポンサーリンク


それによるとレスポンシブウェブデザインへの対応であれば
コードの一部を改変してもよいとのこと。

これまでは表示機器に応じた広告サイズを選別する手段として
php での条件分岐を書いていたんですが、その必要がなくなったということです。

 

イメージ画像

 

実装は簡単、不完全だけどそこそこフレキシブル表示

アドセンスのページがこちらです。

AdSense 広告コードの修正 - AdSense ヘルプ

これまでパソコン(PC)とモバイル機器で
それぞれサイズの異なる広告を分けて表示させるためには、
php の条件分岐を使って分別表示させていました。

これをやらないと、
たとえば PC 用に横 468px の広告を指定していた場合、
iPhone などの画面サイズの小さいモバイル機器でサイトを見た時には
下の画像のように幅 320px を超えた分が欠けて表示されてしまいます。

キャプチャ画像

 

今回のコード改変は上記作業をアドセンスコードの中で完結できる、
言い換えれば php での条件分岐は必要なくなったということですね。

ただし、これまでの「やっちゃぁいけね~よ」というポリシー違反については引き続き有効ですので気を付けましょうね。
規約についてはご自身で確認してください)

 

実装概要

実際にどうやるのかってことですが、
アドセンスのヘルプページを見るとサンプルコードが載ってますので
基本はそれに合わせて必要部分だけを書き換えていけばいいようです。

よく見ると A/B テストも 改変 OK のようですね。

A/B テストというのは、たとえばテキストだけの広告とイメージ広告とどちらの広告がより多くクリックされるのかといった比較広告を打つような時です。

まずコードですが、アドセンスヘルプページにあるサンプルコードが以下のものです。
(※追記:今は別のコードが載ってるようです)

キャプチャ画像

①ここはご自身のアドセンスコードに書き換えます。

コードがわからない方は、ご自身のアドセンスページを開きページ右上を見て下さい。
下の画像の赤枠内の英数字が自分のコードなので、例えば私のだったら
「ca-pub-3655xxxxxxxxxx」と書き換えます。
(ソース見たらアドセンスコードバレバレなんだけど、一応モザイク処理してます^^;)
キャプチャ画像

②&③ここは一番小さい画面サイズで表示させたい広告設定で書き換えます。

サンプルの意味は
『iPhone(スマホ含む)などで見ている人には ③320×50 のサイズで表示させる広告 ID②「1234567890」を適用せよ』というものです。

なので、もちろん上記の条件に該当するアドセンス広告を
事前に設定しておく必要があります。

 

キャプチャ画像

④ここにはどの画面サイズになったら別の広告設定で表示させるかの
分岐ポイントとなる数値を指定します。

サンプルの場合、画面サイズが 501 px 以上なら
つまり『スマホやタブレット等で見ている人には ⑥468×60 のサイズで表示させる広告 ID⑤「3456789012」を適用せよ』というものです。

さらに ⑦801px 以上の画面サイズで見ているときは
つまり iPad 横向き(ランドスケープモード)画面や
PC 上で見た時という感じでしょうか、その場合は
『⑨のサイズで表示させる広告 ID⑧「2345678901」を適用せよ』
というものですね。

500 とか 800 という数字はテンプレートの設定などに合わせて変えてください。

 

サンプルでは 3パターン(スマホ・501px以上・801px以上)の広告サイズですが、
もっと細かく分けたいときは if 以下のブロックをコピーペーストで増やしたり
逆に 2パターンだけの分岐でよければ
サンプルにある 2つ目の if 以下のブロックを削除しちゃってもいいと思います。

追記 -2013.9.2-

上記リンクページのサンプルコードが変わってしまったようですので、上画像のコードをコピーペースト用にコチラ↓に書いておきます。

<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>

追記 -2014.2.5-

上記リンクページのサンプルコードがさらに変わってました。

もうここではご説明しきれないので、後日、新たに書き直します。

一例として記事タイトル下に、アドセンス広告を下のように設定したとします。

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

これは iPhone(スマホを含む)で閲覧時は 300×250 で広告が表示され
それよりも大きいサイズの表示機器
例えばブラウザ幅 501px以上の PC とか iPad などでの閲覧時は
すべて 468×60 のサイズで表示されるというものです。

 

下が実際の表示例です。

キャプチャ画像

 

記事タイトル下ではなく、
記事エリアと幅が異なるサイドバーなどにアドセンス広告を置いた場合は
上記とはまた違った設定になります。

 

このようにいろいろと便利ですが、いくつか使いにくい点もあります。
といっても実用上はさほど影響はないと思われるのでメモ書き程度の話です。

たとえば PC 上でブラウザの幅を狭めていけば、
理論上は画面サイズに応じた広告 ID のものに切り替わるはずなんですが
それはできないようです。

ただしリロード(再読み込み)すれば広告サイズは変わります。

同じように iPad の縦画面(ポートレートモード)と横画面(ランドスケープモード)
広告サイズを変える設定にしていたとしても
縦から横に変えただけではリアルタイムに表示が切り替わりません。

やはりリロードが必要です。

そうはいっても php 分岐処理の必要性がなくなったのは、
ワードプレス初心者の方にとっては嬉しい規約の改訂ではないでしょうか。

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

3件のコメント

  • べき論を持ち出すと、そもそもの趣旨からいえばノーベル平和賞をこういう事例に与えるべきではないと思うがね。

  • はじめまして。きゅいじん
    さん。

    こんにちは。東京在住のパール君
    こと吉川と申します。

    リストラ組 アフィリエイターです。

    きゅいじん
    のワードプレスの知識すごいですね。
    これからも購読させていただきます。

    私はまだお伝えできるような報酬は
    あげていません。

    でも本気で取り組んでいて
    IBSAさんという方に師事しています。

    よろしければ情報交換しませんか。

    どうぞよろしくお願いします。
    お互い頑張りましょう。

    ぽちっと応援しておきました。

    • きゅいじん

      応援ありがとうございます。きゅいじんです。
      どれだけお役に立てるかどうかわかりませんが、こちらこそよろしくどうぞ。

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)