レスポンシブ広告がはみ出す場合の対処法-スマホサイトの横揺れ回避-

今まで何ともなかったスマホサイトがいつのまにか横揺れしてしまっている場合、GoogleAdSence広告（グーグルアドセンス広告）が原因であることがあります。

レスポンシブに設定していても、はみ出しているグーグル広告によって、スマホサイトが横にグラグラ揺れる！そんな症状に悩まされているなら、アドセンス広告を調整して本来のレイアウトを取り戻しましょう( ´ ▽ ` )ﾉ

レスポンシブ広告ユニットとは、デバイスの画面サイズにあわせて自動で調整表示してくれる設定です。

広告ユニットがレスポンシブになっているか下記手順に従って確認します。

【確認の仕方】

1. グーグルアドセンスを開く
2. 左メニューの[広告]→[サマリー]
3. タブの[広告ユニットごと]を選択　図①
4. 既存の広告ユニットから確認したいユニットの鉛筆マークをクリック　図②

左にディスプレイ広告のプレビューが表示されたら、右側にある広告サイズのプルダウンが

• レスポンシブ
• 固定

がレスポンシブになっているか確認します。

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

広告コードはだいたいこんな感じになっているかと思います。

formatのパラメータは、広告ユニットの形状を指定します。autoの場合、レスポンシブ広告ユニットが自動で切り替わります。

responsiveは指定しなくても構いませんが、画面いっぱいに広告を拡張することで、収益アップが見込めるとグーグルアドセンスが告知しているので、やっておきます。

GoogleAdsenseヘルプページにあるレスポンシブ広告のタグパラメータの使用方法を参考にパラメータを変更し、はみ出して表示される広告の修正を試みます。

テストの結果

効果のあった組み合わせは、４番の組み合わせ「レクタングル」と「オート」のみでした。

しかし、タブレットやPC表示でもレクタングルサイズになってしまうという残念な結果に。これでは修正できたとは言えませんね…。

結論として広告コードのパラメータをあれこれやってもダメだったということです。(*´Д｀)。

広告コードのパラメータの変更によるデザイン修正はできませんでしたが、広告のはみ出しによる横揺れはサイト訪問者の離脱につながるため、あきらめるわけにはいきませんよね。

Googleアドセンスヘルプにある レスポンシブ広告コードを修正する方法を参考に、メディアクエリで広告サイズを指定してみることにします。

スマホサイトではみ出す広告は、レクタングル（大）と呼ばれる336×280のサイズのものです。それをスマホサイトで表示させないように指定します。サンプルは下記の通り

/* --------------------------
     スマホ端末用
-------------------------- */
.google-ads{max-width:320px}
/* --------------------------
     小型タブレット端末以上
-------------------------- */
@media only screen and (min-width: 481px) {
.google-ads{max-width:100%} 
}
                        

<div class="google-ads">/*←広告コードを囲む*/
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000"></script>
     <!-- Unit Name -->
     <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-0000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
     <script>
     (adsbygoogle = window.adsbygoogle || []).push({});
     </script>
     </div>

はみ出した自動広告というのは、スクロール時に横揺れしてしまうためユーザビリティの悪いサイトとされます。離脱率は上がるし、収益は下がるしいいことはひとつもありませんね。

CSSのメディアクエリでサイズ指定することで、ひとまず横揺れは修正できたかと思いますが、将来的にまたいつはみ出してしまうことがあるかもしれません。たまにはエゴサチェックが必要ということですね。たまにはですよ、ほんのたまに…。

ということで、以上いつも何かがはみ出しているソクラテツがお送りしました( ´ ▽ ` )ﾉ。