広告による横揺れをきっちり修正

2021.9.1 

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

Planet20xxバナー

今まで何ともなかったスマホサイトがいつのまにか横揺れしてしまっている場合、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は指定しなくても構いませんが、画面いっぱいに広告を拡張することで、収益アップが見込めるとグーグルアドセンスが告知しているので、やっておきます。

formatのパラメータ
rectangle レクタングル
horizontal 横長
vertical 縦長
auto 自動選択
レクタングルとは336×280、300×250といった正方形に近い長方形の広告サイズです。
responsiveのパラメータ
true 自動拡張有効
false 無効

パラメータ変更による試行テスト

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

No. format responsive 結果
auto true ×
auto false ×
rectangle true ×
rectangle false
スマホサイトでアドセンス広告がはみ出していることから、format(フォーマット)のパラメータは、レクタングルかautoのどちらかに限定しテストを行いました。

テストの結果

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

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

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

CSSによる修正

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

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

パラメータを確認
marginでは修正できないよ。広告が中央寄せにならないし

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

CSS
/* --------------------------
     スマホ端末用
-------------------------- */
.google-ads{max-width:320px}
/* --------------------------
     小型タブレット端末以上
-------------------------- */
@media only screen and (min-width: 481px) {
.google-ads{max-width:100%} 
}
                        
html
<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のメディアクエリでサイズ指定することで、ひとまず横揺れは修正できたかと思いますが、将来的にまたいつはみ出してしまうことがあるかもしれません。たまにはエゴサチェックが必要ということですね。たまにはですよ、ほんのたまに…。

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

TOP

【関連記事】

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html/CSS)
ソースコードのハイライト表示のやり方を説明したページへのリンク画像

ソースコードのハイライト表示のやり方

負担が少ない軽量ライブラリを使用して、ハイライト表示する方法を解説。

PC(html)
アフィリエイトの後ろになぜかある1ピクセル画像を究明するイメージ画像

謎の1ピクセル画像を究明

Amazonアソシエイトコードにあるimgタグの1ピクセル画像をご存知ですか?

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP