Google AdsenseのA/Bテストを非同期コードで実装する方法

2013年5月に規約が改定されて、Google Adsenseのコード改変が可能になったことを受けて、以前A/Bテストの実装方法を記事にしましたが、Adsenseの非同期コードが標準化されたことによって、以前の方法では実装できなくなってしまいました。

そこで、今回は非同期コードでの実装方法をまとめてみましたよ。

Adsenseの非同期コードって?

非同期コードとは、簡単に言ってしまえば広告の読み込みが速くなるコードです。

同期コードはAdsense広告が表示されないと、ページ全体が表示されないという仕組み。
そのため、仮にAdsense広告を配信するGoogleのサーバーが不調だった場合、その影響で広告を設置しているサイト全体の表示が遅くなるということになります。

非同期コードはブラウザがサイトを表示する際に、呼び出す処理が別々になるため、そうした影響を受けず、なおかつ広告の表示自体も速くなるわけです。

非同期コードの提供自体は、規約が変更された1ヶ月後からベータ版としてスタートしていて、現在は非同期コードを利用することが推奨されています。

うちのブログでも、昨年末辺りからすべてのAdsense広告を非同期コードに切り替えました。確かに体感的に広告の表示は速くなったと感じますね。

まぁ、元が遅いサーバーなのでまだまだですが。。

非同期コードでA/Bテスト

ここからが本題。

非同期コードは同期コードと記述が異なります。そのため、同期コードで実装していたA/Bテストのためのjavascriptが使えないんです。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-id"
     data-ad-slot="ad-slot-id></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

これが非同期コードの基本記述になるんですが、これをベースにして、50/50の確率で吐き出すように書き換えていきます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:inline-block;width:610px;height:280px;" data-ad-client="ca-pub-id"></ins>
<script>if(Math.random() &lt; .5) {
	mySlotId = "ad-slot-id";
} else {
	mySlotId = "ad-slot-id";
}
(adsbygoogle = window.adsbygoogle || []).push({
params: { google_ad_slot: mySlotId }
})</script>

こちらが、実際にA/Bテストを行うために書き換えたコードです。

書き換えの方法としては、<ins>要素に記述されているdata-ad-client="ad-slot-id"を抜き出して、確率表示のjsに組み込むという流れ。

ちょっと分解して説明していきましょうか。

<ins class="adsbygoogle" style="display:inline-block;width:610px;height:280px;" data-ad-client="ca-pub-id"></ins>

まず<ins>要素。
ここではA/Bテストを行う広告のサイズに気をつけましょう。

インラインスタイルでwidthとheightを指定しますが、必ず大きい広告のサイズを指定してください。

うちでは336×280の広告と、カスタム広告ユニットで記事幅に合わせた610×280の広告でA/Bテストを実施しているので、カスタム広告ユニットのサイズを指定しています。

<script>
if(Math.random() &lt; .5) {
	mySlotId = "ad_slot_id";
} else {
	mySlotId = "ad_slot_id";
}
(adsbygoogle = window.adsbygoogle || []).push({
params: { google_ad_slot: mySlotId }
})
</script>

続いて、確率で吐き出させるスクリプト。

mySlotIdに、<ins>に含まれていたdata-ad-clientの10桁のIDを入れます。
テストしたい別の広告のIDも、もう1ヶ所のmySlotIdに入れてやって下さい。

まぁ、基本的にはガバっと上のコードをコピペして、<ins>のインラインスタイルや、ca-pub-id、mySlotIdの部分をちょちょっと書き換えてやればいいんじゃないでしょうか。

とりあえず、これで非同期コードでもA/Bテストができるようになります。
収益性の高い広告を見極めたいという場合、広告を期間ごとに差し替えて検証するよりも効率的ですからね。広告収益を上げたい! という人は試してみるといいですよ。

---

なお、同期タイプのコードでA/Bテストをする場合は、こちらの記事を参考にどうぞ。
非同期コード推奨なので需要はないと思いますが一応念のため。