Googleアドセンスの「レスポンシブ広告ユニット(ベータ版)」を採用してみる

Google AdSence(アドセンス)が、レスポンシブ対応の広告ユニットをベータ版で対応したので、このレスポンシブWebデザインのEigerに実装してみた。

■Googleアドセンスにて広告コードを取得する

  1. アドセンスで新規広告ユニットを作成し、[広告サイズ] プルダウンで [レスポンシブ広告ユニット(ベータ版)] を選択。現状は、1種類のみ。
  2. 広告コードを取得。
  3. 出力された広告コード名(Eiegr・レスポンシブとした場合、xxxx部分は実際は英数字)

    <style>
    .eiegr { width: 320px; height: 50px; }
    @media(min-width: 500px) { .eiegr { width: 468px; height: 60px; } }
    @media(min-width: 800px) { .eiegr { width: 728px; height: 90px; } }
    </style>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- Eiegr・レスポンシブ -->
    <ins class="adsbygoogle eiegr"
    style="display:inline-block"
    data-ad-client="xx-xxx-xxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxxx"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>

  4. 次のステップとして、アドセンスは「レスポンシブ広告ユニットのサイズを設定する」という説明が書かれている。
    しかし、この説明(留意点)が今一つわかりにくく、出力コードでなんとか対応することとする。
    参考:レスポンシブ広告ユニットを作成する - AdSense ヘルプ

■MTテンプレートに広告コードを設定する。

  1. アドセンスで発行された広告コードをテンプレートモジュールとして作成する。
  2. 今回はトップページのコンテンツ(ブログ)一覧の下部に配置する。
  3. インデックステンプレート「メインページ」の[ブログ記事の一覧]モジュールの下に、アドセンス広告コードのモジュールを追加。
  4. 「メインページ」テンプレートを再構築。

■問題点発生

 デフォルトコードのままでは、@mediaの切り替えサイズが、このテンプレートサイズに対応していないため、PC表示800pxになると、広告バナーは、右メニューの領域まではみ出てしまう。

 そこで、@mediaの部分を変更。

 本来、このテンプレートのmedia切り替えサイズは、700pxと930px。

  •  広告コードの@media(min-width: 500px) → 700px に変更。
  •  このコンテンツ部分の横幅サイズは、最大621pxなので、728pxのバナーははみ出してしまうので、@media(min-width: 800px)の行は削除した。

 これで、とりあえず対応したが、これが最適化は定かでない。

chome拡張ツールWeb DeveloperのResise>View ResponsiveのMobile portrate(左) とLayouts 実際のスマートフォンスクリーンショット(右)

?

Gアドセンス広告バナーのスマートフォン表示

320pxのプレビューツールでは、広告バナーが少し大きめで、横スクロールバーが表示されているが、実際のスマートフォン(Galaxy S4)では、問題なく表示されている。

まだベータ版ということなので、今後のアドセンスのレスポンシブ対応広告コードの推移を見守ることにする。