2013-07-09

Async版広告コードを使ったAdSenseの広告切り替え

Google Adsenseの広告コードでAsync版のBETAテストが始まった。広告表示時にページの読み込みをブロックしないというのが売りでそれ以上でもそれ以下でもなく、コードもそんなにスッキリするわけではないし、空要素さん……みたいな感じだけど、現行のものよりはこっちの方が良い。ということでこれを利用する場合に広告サイズの切り替えはどうするのが良いのか考えてるメモ。

コピペするコードはHTMLのstyle属性で広告のサイズを、data-*属性で広告スロットとかを指定してあり、そのまま再利用するのは難しい感じ。document.write()でも使えば話は別だけどそれはさすがにためらう。innerHTMLでなら広告のコンテナーであるins要素の部分はほぼコピペでいけるけど、マークアップ増やす必要があるのでアレ。

<ins class="adsbygoogle"
  id="adsense-main"
  style="display:inline-block;width:300px;height:250px"
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
  data-ad-slot="xxxxxxxxxx"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});

  (function (d) {
    if (d.body.dataset) {
      var p = d.getElementById('adsense-main');
      var w = p.parentNode.clientWidth;

      if (w >= 728) {
        p.style.width = '728px';
        p.style.height = '90px';
        p.dataset.adSlot = 'xxxxxxxxxx';
      }
    }
  }(document));
</script>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

• なるべくデフォルトとする広告コードをいじらずにIDを振るだけに留める
• datasetを読めるかどうかのチェックは必ずする
• ID振ったノードのparentNodeの幅を取得してそれを見て切り替える

displayプロパティーやdata-ad-client属性の値は固定で差し替える必要はないのでこんな感じで良さそう。ID考えるのも振るのも面倒くさそうなので.adsbygoogleをなめてそれぞれ置き換えるとかのが複数の広告のケースにも対応出来そうだしベターかも。切り替えスクリプトはbody要素の閉じタグの直前に置くのが良さそうだけど、Analyticsでうまく解析できるのか謎い。

これでは切り替える広告の増減とかに安全に対応できるとは思えないし、きれいでもないのでもうちょっと別のうまい方法を考えたい。切り替えで使う広告のins要素を全部貼っておいて、表示できる最大サイズのものだけ残すみたいなやり方だとコピペミスは発生しなさそうで安全だけど、Googleに目をつけられて悲惨なことになりそう。とりあえず出来そうなことはCSP対応を建前にして外部スクリプト化するくらいか。