GoogleAdSense レスポンシブ広告が親ボックスを突き抜けて画面横幅いっぱいに表示されてしまう

このブログで使っている自作テンプレートを新しいものに変更しました。それに伴い広告プログラムを新たに組み込み、開発者ツールでプレビューしてみたのですが、GoogleAdSenseのレスポンシブ広告が親ボックスを突き抜けて表示される現象が発生しました。

※普段自分のサイトを含めAdblock(広告をブロックするChromeの拡張機能)を有効にしてWebサイトを閲覧しているので、広告の表示確認はこのような機会にしかやりません。なのでもしかしたら前のテンプレートでも同じような表示がされていたかもしれません。

解決法

取得した広告コードにdata-full-width-responsive=”false”の設定を加えます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog-auto -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-XXXXXXXXXX"
 data-ad-slot="XXXXXXXXXX"
 data-ad-format="auto"
 data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

広告が違和感なく表示されるようになりました。

Q.広告コードに手を加えて問題無いのか

この設定はGoogleAdSenseの公式サポートにて説明されているものなので問題ありません。

モバイル端末の画面においてレスポンシブ広告ユニットが幅いっぱいに自動拡張される動作をご希望でない場合は、広告コードを修正してこの動作を無効にできます。ただし、この動作を無効にすると増収の機会を逃す可能性があります。Google が行ったテストの結果、モバイル端末が縦表示の場合には、全幅サイズのレスポンシブ広告で成果が上がることが判明しています。

レスポンシブ広告のタグパラメータの使用方法

但し、この設定を施した場合、収益減少の可能性がある事が書かれています。たしかにより大きい広告の方がユーザーの目に留まり易いでしょうが、広告の親ボックス貫通はいくらなんでも違和感が凄まじいです。

ワンポイント

私はモバイル表示(スマートフォン、iPad)に限定して、data-ad-formatの値をautoからrectangleに変更しています。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- blog-auto -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-XXXXXXXXXX"
 data-ad-slot="XXXXXXXXXX"
 data-ad-format="rectangle"
 data-full-width-responsive="false"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

auto設定だと表示幅を活かしきれていない細長い広告が表示される事が多かったのですが、rectangle設定にするとその辺が解消されました。あまり検証はしていないので参考程度に。