2013-06-28

AdSenseの広告切り替え

Google AdSenseが公式にいくつかのケースに限って広告コードの改変を許可したので、後に手を入れることも考えて効率的なコードを考えている最中のメモ。

切り替えるそれぞれの広告スロット番号(や幅、高さの設定)はAdSenseで取得できるコードからコピペするようにしないと、コードの間違いなどミスを起こしそう。本当は外部JavaScriptファイルにそれぞれの広告の設定を保存しておいて、viewportでどれかひとつを読んでやるみたいなのがスッキリして良い気がするけどそこまでして良いのかわからない。

ヘルプにあるdocument.documentElement.clientWidthで切り替えるのは、広告のサイズと切り替えの条件文で比較する数字にずれができるのでメンテナンス性が悪そう。なので広告を貼る位置の要素の幅を取得し、ウェブサイトごとに余白や枠線分を適当に引いておいた数字と比較するのが良さそう。

var w = d.querySelector('[role="main"] > .adsense').clientWidth - ((1 + 7) * 2);

このサイトでは[role="main"]直下のadsenseというクラスを振ったaside要素をAdSenseのコンテナにしており、1pxの枠線と7pxのpaddingがあったのでその分引いて広告を置けるサイズを計算していた。そうすればif文の条件式で使いたい広告幅をコピペするだけで良くなる。

google_ad_client = "pub-xxxxxxxxxxxxxxxx";
/* 250x250 */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;

(function (d) {
  if (!d.querySelector) return;
  var w = d.querySelector('[role="main"] > .adsense').clientWidth - ((1 + 7) * 2);

  if (w >= 970) {
    /* (970x90) */
    google_ad_slot = "xxxxxxxxxx";
    google_ad_width = 970;
    google_ad_height = 90;
  } else if (w >= 728) {
    /* (728x90) */
    google_ad_slot = "xxxxxxxxxx";
    google_ad_width = 728;
    google_ad_height = 90;
  } else if (w >= 468) {
    /* (468x60) */
    google_ad_slot = "xxxxxxxxxx";
    google_ad_width = 468;
    google_ad_height = 60;
  }
})(document);

これはキレイじゃないな。

デフォルトのサイズはモバイル広告に対応しているものにしておくと安全そう。documen.querySelector()に対応していないブラウザーでは切り替えが起こらないので、効果が高いとされてる300x250にしておくのが安定か。サイズを切り替えるのではなく、効果が高いとされている300x250を置く数を幅によって増やすみたいなのもアリなのかなと思って聞いてみたけど梨の礫……。

AdSense側で広告の組み合わせを定義できて、貼った場所の幅によって適当に切り替えてくれる……みたいなのが理想だけど、そううまくはいかないか。今後に期待して、とりあえずはこれを使ってみている。