loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > AdSense(アドセンス)広告のコードを直接改変してレスポンシブウェブデザインに対応させてみる
この記事は約4分で読めます。
この記事は最終更新日から3年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2013.7.11

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

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

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

SIRIUSレビューイメージ画像

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

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

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-

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

追記 -2014.2.5-

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

もうここではご説明しきれません。

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

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

 

下が実際の表示例です。

キャプチャ画像

 

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

 

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

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

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

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

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

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

以上です。

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「Logue (tcd020)」 

コメント(3件)

  • 木幡友美 より:

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

  • パール君 より:

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

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

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

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

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

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

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

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

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

    • きゅいじん より:

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

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

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

先頭へ