Googleが提供しているアドセンス広告ですが、スマホ時に表示崩れが少し目立つようです。今回は、Google Adsence 広告が画面からはみ出る原因と対策をご紹介します。

Googleアドセンス広告はいくつかパラメーターが用意されており、ある程度レスポンシブ仕様を調整できるようになっています。下記のパラメータを2つ指定することで、画面はみ出る表示崩れは修正ができました。以下で詳しく説明していきます。

<ins class="adsbygoogle" data-ad-format="rectangle" data-full-width-responsive="false"></ins>

左の余白分、広告が画面幅からはみ出してしまう【事例】

自動的にデバイス全幅のサイズで、広告を展開する仕様が原因のようです。どうやらGoogleの調査では、全幅サイズ広告の方が収益性が上がる結果があるらしく、このような仕様になっているとのこと。

Google のテストにより、モバイル デバイスが縦表示の場合には全幅サイズのレスポンシブ広告の成果が高いことが判明しています。

Google AdSense ヘルプ

しかし表示崩れが原因で、ウェブサイトのユーザーインターフェースを損ねてしまっては意味がありません。

Googleアドセンス広告の全幅表示を無効化する【対策】

広告サイズを画面全幅で算出するかどうかを設定するパラメーター（data-full-width-responsive）を “false” （無効）にしてください。

<ins class="adsbygoogle"　data-full-width-responsive="false"></ins>

記事内広告の全幅表示を無効化するには、次のとおり、記事内広告の広告コードに data-full-width-responsive パラメータを追加します。

Google AdSense ヘルプ

これにより、サイズ算出の基準が画面サイズから親コンテナ（要素）に変わります。親コンテナ（要素）に幅が設定されていないとサイズ算出がうまくいかないようですので、CSSで明示的に設定しておきましょう。

親コンテナに幅が設定されていない
幅が明示的に設定されていない親コンテナ（フローティング要素など）の中にレスポンシブ広告コードを配置している場合、広告コードはレスポンシブ広告ユニットに必要なサイズを算出することができません。

Google AdSense ヘルプ

親コンテナの幅を設定しても、広告サイズの算出がうまく機能しない【事例】

それでもまれに、実機だと広告サイズの算出がうまく機能せず、全幅サイズを超えた広告が配信されてる事例がありました。
※検証ツールのスマホプレビューでは問題なし

調べたところ、親コンテナ（要素）に幅が設定されていない以外にも、JavaScript が原因で広告サイズの算出がうまく機能しない事例があると記載されていました。当メディアでは特にそのようなスクリプトの記述はないので、今回の原因ではないですが、一応ご紹介しておきます。

サイトでサードパーティの JavaScript を使用している
ページが完全に読み込まれるまで広告を非表示にするスクリプトをサイトが使用しており、このようなスクリプトがレスポンシブ広告コードより先に実行される場合は、広告コードはレスポンシブ広告ユニットに必要なサイズを算出することができません。

Google AdSense ヘルプ

当メディアの広告サイズの算出がうまく機能しない【原因】

自分のウェブサイトで検証を続けていると、どうやら広告の形状によってサイズの算出がうまくいかないということが判明しました。

広告の形状の自動調整を無効化する【対策】

サイトのスペースに合わせて自動で最適な広告をするために、広告ユニットの形状を指定するdata-ad-formatというパラメータが、デフォルトでは”auto”（自動調整）になっているので、”rectangle”（レクタングル）にします。

<ins class="adsbygoogle"　data-ad-format="rectangle"></ins>

これによって、全幅サイズを超えた広告が配信されることはなくなり、きちんと親コンテナ（要素）の幅の中で表示されるようになりました。

親要素で広告サイズを制御してみる【おまけ】

今回の対策で、親コンテナ（要素）にフィットさせて広告を表示させることができるようになりました。したがって、親コンテナ（要素）に指定したCSSでも広告サイズの制御ができそうです。

Googleの調査で全幅サイズのレスポンシブ広告の方が収益性が上がる結果があるとのことなので、全幅サイズの広告を親コンテナ（要素）のCSSで指定してみましょう。レスポンシブ広告をラッパー要素で囲み、明示的な横幅をCSSで指定してあげれば完了です。

<div class="l-ga-wrapper">
  <script async src="XXXXXX" crossorigin="anonymous"></script>
  <ins class="adsbygoogle" data-ad-format="rectangle" data-full-width-responsive="false"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
<style>
.l-ga-wrapper {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}
</style>

広告サイズをCSSで調整するのは規約違反？

GoogleはCSSを使用してGoogleアドセンス広告の仕様を調整することを許可しています。

現在のレスポンシブ広告コードではご希望どおりの広告ユニットを作成できていない場合は、レスポンシブ サイトの要件を満たすように広告コードを修正してください。

Google AdSense ヘルプ

さいごに

審査も厳しく収益性の高いGoogleアドセンス広告。折角なら活用したいところです。うまく皆さんのウェブサイトに合わせて調整していきましょう。この記事が皆様のお役に立てれば幸いです。