Google Adsenseがレスポンシブデザインでも柔軟に利用可能にポリシー改訂!Webサイトの収益を更に効率化しよう!


Google Adsenseがレスポンシブデザインについに対応!

待ってました!リクエストが多かったのでしょうか。ついにネットの巨人がポリシーを改訂してAdsenseのタグ改変を一部認めたようです。
Updates to our ‘Modifying Ad Code’ Policy – Inside AdSense :http://adsense.blogspot.com.au/2013/05/updates-to-our-modifying-ad-code-policy.html
英語です。日本語版のInside-Adsenseもきっともうすぐ出るでしょう。
okaoka.netでも先日こういった記事を書きました。
WordPressでレスポンシブにするなら必ず覚えておきたい、広告やソーシャルボタンなどをスマホとPCで出し分ける方法 :http://okaoka.net/2013/04/02/wordpress-responsive-contents.html
GoogleのAdsense、弊社nanapiでも大活躍なのですが、いままでレスポンシブデザインにフィットさせるには上記記事のような形で、phpを使って出し分けるなど結構トリッキーな事をする必要があったのですね。これによって一応対応は出来るものの、なんとなく、もうこれは実現は出来たけれどレスポンシブじゃないよね。的な趣になっていました。
が!この度のポリシー改訂によってついにレスポンシブにも対応できるようになったようです!

改訂内容をチェック!

詳細は上記のInside Adsenseを読んでいただければ分かるのですが、英語かよって人のために、かいつまんでご説明します。

  1. レスポンシブデザインに対応出来るように!
  2. AdsenseのABテストが可能に!
  3. 動的なカスタムチャネルの指定
  4. Adsenseタグの短縮が可能に

いずれも鬼便利な改訂で(個人的にはその4が一番素敵だと思います)、gj!Adsense!なんですが、今回取り上げるのは1!レスポンシブ!もう一回!レスポンシブ!流行ってるし!
その他もきっとどこかのサイトで説明されるでしょうし、いまいちだったらここでも今度説明します。
で、何が変わったかというと、機能としては(おそらく)変わっていないんですね。変わったのは「タグ改変のポリシー」です。
Adsenseをご利用中のWebサービス、ページ運営者の方々はご存知かと思いますが、優秀過ぎるAdsenseはその優秀さを維持するためか、かなり厳格なポリシーで運用されております。
アレもNG、これもNGと、基本ダメダメづくしが基本です。その中の1個である「タグ改変」これが規制緩和されたわけですね。
基本的に法人で一定の契約をしている所にしか公開されていなかった(許されていなかった)、タグ改変が今回広くポリシーの規制緩和によって実現することがOKとなったわけです。

レスポンシブに対応する!

で、じゃあどうやるんだオイ。というところでやっと本題。これもご丁寧にGoogle先生書いてくれています。
面倒くさい人のために以下参照。

<script type="text/javascript">
    google_ad_client = "ca-publisher-id";
   /* ↑自分のAdsenseのIDを入れましょう */
    width = document.documentElement.clientWidth;
   /* ↑これを書き忘れると機能しません。よく分からなくても記載しましょう */
    google_ad_slot = "1234567890";
   /* ↑デフォルトとなるad_slotのIDを入れましょう */
    google_ad_width = 320;
   /* ↑デフォルトとなるad_slotの幅を入れましょう */
    google_ad_height = 50;
   /* ↑デフォルトとなるad_slotの高さを入れましょう */
   /* ↓ここから分岐が始まります。この例だと幅500以上ならif以下で指定されたad_slotを表示 */
        if (width > 500) {
        google_ad_slot = "3456789012";
        google_ad_width = 468;
        google_ad_height = 60;
    }
   /* ↓更に分岐。自分のサイトにあわせてどぞ。この例だと800以上なら次のif以下で指定されたad_slotを表示 */
    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>

<参照元>Modification of the AdSense ad code – AdSense Help:http://goo.gl/97UpL
以上です。
もうパッと見てそのまんまなわけですが、上の例だと、幅が800以上ならad_slot”2345678901″を表示、幅が800未満500以上ならad_slot”3456789012″を表示。そして幅500未満ならデフォルトのad_slot”1234567890″を表示と。そういう塩梅でございます。
全体的な流れを説明しますと、

  1. まずはレスポンシブに対応したいターゲットの広告枠とサイズを決める。
  2. ブレークポイントで表示したい広告枠とサイズを決める(CSS側のmedia queriesに合わせると丁寧ですが、もう少しざっくりしてもいいかもですね)。
  3. その枠で分岐していない場合に利用するベースとなるAdsenseのタグを発行(既に利用中のでも、もちろんOK)。
  4. 幅が変わった際に表示するAdsenseのタグを発行。利用する分だけ。
  5. で、1で決めたAdsenseのタグの指定位置に「width = document.documentElement.clientWidth;」を追加
  6. デフォルトの枠サイズに追記して、今度はそれぞれの幅ごとにif文で分岐を書いていく
  7. 分岐したい数と枠の分だけifループ
  8. 簡単ヽ(=´▽`=)ノ

で、さっそくokaoka.netの記事ページのヘッダでも試してみました!
まずは単純に今まで通り、幅が480以下なら250×250が表示されるように設定しています。phpでの分岐では無くなるため、adsenseの知識だけあればとりあえず対応可能です!

制限事項とか注意点とか

超簡単なレスポンシブ対応で、WordPressのレスポンシブテンプレート使ってるだけって人でもこれなら簡単にレスポンシブ対応のAdsenseが実現出来ます!
が!恐らくこの記事を読んでいただいた、試したがりの方なら現状既に「アレ?」と思っているかと!そう!その辺りの注意点です!
結構大胆にポリシー改訂に踏み切ったGoogleですが、残念ながらいい事ばかりでなくて、微妙な制限事項とか注意点とかもあります。

制限

動的なサイズ変更には非対応。
「アレ?」の正体は多分コレ!違ってたらゴメンナサイ!
なんかサラッと書いてあって、ひょっとすると意味取り違えている可能性もありますが(間違いとか気づいた方はご指摘を)、ちょい微妙なラインの問題ですね。
例えばPCとiPhoneとでブレークポイントを指定している場合、PCのブラウザの幅をドンドンと縮めていっても動的にブレークポイントでad_slotを切り替えてくれません。再読み込みが必要です。
通常利用シーンではあまり問題にはならないかと思いますが、例えばiPhoneのポートレート表示後に、ランドスケープにしてもリアルタイムでアドスロットの変更は効かないよってことだと思います。
なので純粋なレスポンシブとはちょっと異なります。ポートレートとランドスケープでの変更は是非何とか対応してほしいですね。Googleに要望したい!もしかしたら別の方法とか合わせれば出来るのかもしれません。知ってる人は是非教えて下さい。
スマートフォンなどのローテーションにも対応出来れば言うことなしですね。

注意点

端的に言うと、引き続きダメなものはダメ。破ると容赦なく凍結からの垢バン。ってことです。
例としては、「広告主に害が出る改変はいかんよ」とかですね。あくまで一部緩和であって、「超えちゃいけないライン。考えろよ。」ってところは引き続きなのでご注意くださいませ。結構チラホラ聞きますが、Google先生は容赦なくAdsense凍結してます。
とは言え!便利な変更をありがとう!Google!今後も便利に使わせてください!

締め

てなことで、現行phpで事足りている方は、無理に変更する必要は無いかもしれませんが、せっかくAdsenseだけで完結出来ますし、何よりコードがスッキリするので是非試してみてはいかがでしょうか!

追伸

そうそう。大変ご無沙汰しております。okaokaです。nanapiで社長に負けずいつもわりと頑張ってます。多忙を理由に気がつくと2ヶ月も更新をサボっておりました。
もうちょっと頑張って更新していきます。引き続き、okaoka.netをどうぞよろしくお願い致しますm(_ _)m