AdSense横長広告イメージ
AdSense横長広告イメージ

AdSenseのレスポンシブ広告をモバイル時でも横長広告にするカスタマイズ方法

AdSenseのレスポンシブ広告をタイトル下辺りに設置しました。すると、モバイル表示のとき、広告のサイズがレクタングルで表示されてしまいました。AdSenseで取得したコードをそのまま使い設置したのですが、ファーストビューでいきなりこんな大きな広告が出るのはどうかと思い、広告コード改変の許可範囲内でカスタマイズしてみました。
目標としましては、下図のようにレスポンシブに対応し、モバイル表示でも横長の広告が表示されるようにしてみます。

レスポンシブ広告を横長設定にする

AdSense広告コードの改変

通常のディスプレイ広告(レスポンシブ対応)は、以下のようなコードになっています。
data-ad-clientdata-ad-slotは仮のものなので必ずご自分の設定を確認してください。

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

このコードを許可範囲内でカスタマイズします。まず、横長の広告に指定したいので、6行目data-ad-formatの行を修正します。
data-ad-format="auto""auto""horizontal"に変更します。これで、横長広告を表示するように設定できます。しかし、PC表示時はうまくいったのですが、モバイル表示だとレクタングル広告が表示されてしまいました。これは、モバイル表示の場合、レスポンシブ広告ユニットが全幅サイズに自動拡張される動作をするようパラメータが設定されていた為のようです。

上記コードの7行目にあるdata-full-width-responsive="true"data-full-width-responsive="false"に変更してみましょう。そうすると、全幅サイズに自動拡張されなくなり、モバイル表示でも横長広告が表示されるようになります。

カスタマイズ後のコード(例)

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

Google様が行ったテストによると、モバイル縦表示の場合、全幅サイズのレスポンシブ広告で成果が上がるという結果がでているようです。data-full-width-responsiveを無効にするカスタマイズをする場合はこのことを理解した上で自己責任で設定をしてください。

レスポンシブ広告コードを修正する方法の詳細はこちら


JunJunWeb.Netの新着情報を受け取るには
SNSアカウントをフォローすると便利
タグ :