WordPressテンプレート制作、ウェブデザイン技能検定に挑戦中

前の記事:SVG クリッピングとマスクの使い方 キラキラのパスの打ち方
HOME
次の記事:

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

2件のコメント AdSense

このブログで使っている自作テンプレートを新しいものに変更しました。それに伴い広告プログラムを新たに組み込み、開発者ツールでプレビューしてみたのですが、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設定にするとその辺が解消されました。あまり検証はしていないので参考程度に。

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

2件のコメント▲コメントを非表示

名無し2018-07-23 15:07:57

この記事はモバイル端末のことを言っていますが、PCでWEBサイト漁っているときに、 たまに広告が飛び出てて見ずらいのは、見ている側の方がおかしいのではなく、サイト側に 問題があるってことなんですか? 収益に関わる事なんで広告自体はしょうがないけど、見ている側からすると結構邪魔ですよね よく分からずに何となくたどり着いたこのサイトで質問させてもらいました

返信

rarecard2018-07-24 00:22:57

そういったケースはサイト側のデザインに問題がある可能性が大きいですが、サイト表示が見ている側の環境に左右される事もあるので一概にそうとは言い切れません。 サイトを製作していて、GoogleChromeでは上手く表示されているのに、IEで見ると表示崩れがあるといった事はしょっちゅうです。 Webサイトの広告が煩わしいと感じたらAdblockの導入がオススメです。 https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb?hl=ja&utm_source=chrome-ntp-launcher

返信

コメント

カテゴリ

月別アーカイブ