Google アドセンスの [ レスポンシブ広告ユニット ] を利用する

これまで、レスポンシブ・ウェブ・デザインを採用したサイトに、Google アドセンスを設置した場合、パソコン閲覧時とスマホ閲覧時に広告サイズを切り替えるのが面倒でした。

そんな時は、PHP でデバイスの種類を判定して、広告コードを切り替えるような処理をしてきましたが、Google アドセンスから公式に [ レスポンシブ広告ユニット ] という便利な仕組みがリリースされたので試してみました。

この記事の目次

[ レスポンシブ広告ユニット ] の作り方
アドバンスモードに切り替えた
- HTML 広告コードの修正
- CSS の追加
スマホ画面の横幅いっぱいに広告が表示される時の対処法
参考にさせてもらったページ

[ レスポンシブ広告ユニット ] の作り方

過去に作成した広告ユニットは、広告のサイズが変更できません。レスポンシブ用に新しい広告ユニットを作成する必要があります。

手順は次の通り。

Google アドセンスの管理画面で、新しい広告ユニットを作成する。
[ 広告サイズ ] で [ レスポンシブ広告ユニット ( ベータ版 ) ] を選択する。
[ 保存してコードを取得 ] をクリックする。
表示された画面の [ モード ] で [ スマートサイズ ( 推奨 ) ] を選択する。

CSS を使った正確なサイズ指定や、広告ユニットの形状 ( 横長・縦長・レクタングル ) を指定したい場合は、[ アドバンスモード ] 選択し、広告コードを修正します。

アドバンスモードに切り替えた

しばらくは、コードの設置が簡単な [ スマートサイズ ] モードを使っていたんだが、パソコンで自分のページをみると、468×60 のバナーしか表示されず、広告のクリック率が下がったような気がしたのでアドバンスモードを使うことにしました。

Google AdSense レスポンシブ広告ユニットのアドバンスモードを使うと、CSS で広告のサイズを切り替えることができます。

僕の場合は、大きいレクタングルが表示されるように調整しました。

HTML 広告コードの修正

スマートサイズモードでは data-ad-format="auto" となっていた部分を、data-ad-format="rectangle" に変更します。

コードは次のような感じです。

<div class="adsense">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle"
        style="display:block"
        data-ad-client="ca-pub-****************"
        data-ad-slot="**********"
        data-ad-format="rectangle"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

CSS の追加

次のような CSS を設置します。

.adsense {
    width: 300px;
    height: 250px;
}
@media screen and (min-width: 600px) {
    .adsense {
        width: 336px;
        height: 280px;
    }
}

以上で完了です。