レスポンシブウェブサイトでのAdsense広告まとめ

3ways_put_google_adsense_in_responsive_design_top

レスポンシブデザインのウェブサイトでのAdsenseの広告ユニットの設置方法です。3つの方法と、それぞれの違いをまとめました。

広告ユニットのサイズ指定の時の広告の表示のされ方

3ways_put_google_adsense_in_responsive_design_how_showing_responsive_unit

広告ユニットのサイズを指定する方法は3つあるのですが、どの場合も表示に関しては同じです。任意のサイズを指定した場合、ディスプレイ広告やFlash広告の場合、用意されている広告のサイズが収まらなければ、その広告は表示することができませんし、指定した広告サイズより表示されている広告サイズが小さければ、センタリングされるだけです。テキスト広告の場合は、だいたいいっぱいに広がるようになっているようです。

 

レスポンシブ広告ユニットと、カスタム広告ユニットと、コードの編集

画面の幅によって広告のサイズを切り替える方法として、3つの方法があります。

1.レスポンシブ広告ユニット

Googleが正式にレスポンシブに対応した広告ユニットを使う方法です。親要素の幅に合わせて自動で、最適なサイズの広告を出力してくれます。スマホなどのモバイルデバイスの、画面回転時にも再出力してくれます。

より適切なサイズを自分で指定することもできます。よくある問題は、728 x 90のビッグバナーを、ヘッダー(メニュー下など)に設置すると、スマホで閲覧した時に、300 x 250などに切り替わり、ファーストビューを占領してしまうことです。

これを回避するために、用意されている data-ad-format オプションの値を "rectangle"(レクタングル)、"vertical"(縦長)、"horizontal"(横長) のなかから、最適なものにします。(今回の場合、horizontal)


<ins class="adsbygoogle"
    style="display:block;"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890"
    data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

またより厳密に制御したい場合は、CSSで親要素のサイズを指定します。レスポンシブデザインなので、メディアクエリを使って、画面幅に応じた条件分岐ができます。


<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="1234567890"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

2.カスタム広告ユニット

広告ユニットを新規作成するときに、カスタム広告ユニットを使ってあらかじめ広告サイズを固定する方法です。表示サイズに関してはレスポンシブ広告ユニットのサイズを、CSSで指定した場合と同じと言えます。しかし、レポートの集計結果が異なります。(→後述:レポートについて)

3.コードの改変

以前からよく使われていた方法です。広告コードの幅と、高さを指定します。


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="1234567890"
     data-ad-format="auto"></ins>
<script>
width = document.documentElement.clientWidth;
if (width > 414) {
  	my_style = 'display:block;width:728px;height:90px';
} else {
	my_style = 'display:inline-block;width:320px;height:100px';
}
(adsbygoogle = window.adsbygoogle || []).push({
  params: { style: my_style }
});
</script>

この方法は、スクリプト上で画面幅を取得し、条件分岐ができるので、これまでにもレスポンシブ対応の方法として使われていました。カスタム広告ユニットを作成した場合に出力されるコードを、自分で指定する形です。コードIDやカスタムチャネルを動的に変更できるので、一番自由度が高いです。

レポートについて

3つのどの方法を使っても任意のサイズを指定できるので、表示サイズの制御に関してはどれも大きな差はありません。しかし、レポート集計時に、カスタム広告ユニットやコード改変の場合は、400x300などのサイズが集計されるのに対し、レスポンシブ広告ユニットは「広告サイズ」が「レスポンシブ」と表示されます。ただ、レスポンシブでも、クリエィティブサイズ項目にどのサイズで表示されたかがそれぞれ集計されているので、どの場合も厳密な表示サイズが分かるようになっています。

3ways_put_google_adsense_in_responsive_design_size_report

結局3つのうちどれがいいか、ということになりますが、次の記事で、それぞれの特徴を踏まえた運用方法の一例をご紹介します。

レスポンシブ広告ユニットを作成する - AdSense ヘルプ