レスポンシブ広告ユニットを作成する

レスポンシブウェブデザインでは、表示されているデバイス（スクリーン）の機能に応じて、ウェブサイトの表示を動的に制御できます。レスポンシブ広告ユニットを使用すると、さまざまなデバイスで広告以外のページの要素のレイアウトを制御しながら、それに合わせて広告のサイズを制御できます。レスポンシブウェブデザインの一般的な情報については、Google デベロッパーサイトのスマートフォン向けウェブサイトの作成をご覧ください。

レスポンシブ広告ユニットでは、新しい非同期広告コードを使用します。非同期広告コードでは、掲載する広告のサイズを動的に指定可能なカスケーディングスタイルシート（CSS）を使って広告コードのサイズを直接設定できます。

ステップ 1. 広告コードを生成する

レスポンシブ広告ユニットの広告コードを生成する手順は次のとおりです。

通常の方法で広告ユニットを作成し、[広告サイズ] プルダウンで [レスポンシブ広告ユニット（ベータ版）] を選択します。
なお、レスポンシブ広告ユニットは非同期コードのみを使用するため、コードを取得する際の [広告コード] ボックスに [コードタイプ] プルダウンは表示されません。

ステップ 2. サイトに広告コードを配置する

広告を表示するページの HTML ソースコードに広告コードをコピーして貼り付けます。

ステップ 3. レスポンシブ広告ユニットのサイズを設定する

レスポンシブ広告ユニットには既定のサイズがないため、CSS を使ってサイズを動的に指定する必要があります。この機能はまだベータ版であるため、サイズを設定する際には次の点にご留意ください。

表示する広告の縦横サイズを設定する際には、必ず固定のピクセル値を指定します。指定する縦横サイズは、AdSense でサポートされる広告サイズのいずれかにしてください。
非同期広告コードはページの最初の読み込み時にのみ反応し、その後の広告サイズの変更（スクリーンの向きが変わっるなど）によって新しい広告が表示されることはありません。この点は、今後解決してまいります。
メディアクエリがサポートされていない場合は、必ずデフォルトの広告サイズを設定してください。
現在のところ、レスポンシブ広告ユニットで表示されるすべての広告をサイズ別に分類することはできません。この点も、今後解決してまいります。

例

非レスポンシブ広告ユニットの基本的な例

次の例では、非レスポンシブ広告ユニットで、CSS を使って広告ユニットのサイズを設定する方法を示します。

<style type="text/css">

    .adslot_1 { width: 728px; height: 90px; }

    </style>

    <ins class="adsbygoogle adslot_1" style="display:inline-block;" data-ad-client="ca-pub-1234" data-ad-slot="5678"></ins>

    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

レスポンシブビッグバナーの例

レスポンシブ広告ユニットでは、メディアクエリを使ってサイズを設定します。一般的には、スクリーンの幅に基づいてサイズを設定することをおすすめします。次の例では、CSS スタイルブロックと上記の基本的な例を組み合わせてレスポンシブビッグバナーに対応する方法を示します。

<style type="text/css">

    .adslot_1 {

      width: 320px; height: 50px;

    }

    @media (min-width:500px) { .adslot_1 {

      width: 468px; height: 60px;

    }}

    @media (min-width:800px) { .adslot_1 {

      width: 728px; height: 90px;

    }}

    </style>

この例で使用されているサイズは、[広告の設定] タブで生成されるレスポンシブ広告コードのサンプル CSS メディアクエリで使用されているサイズと同じです。

この例の @media ルールは CSS3 構文で、最近のすべてのブラウザでサポートされています。古いブラウザ（Internet Explorer 7 以前など）に対応する場合は、あらかじめ指定されているデフォルトのサイズを設定することをおすすめします。これにより、メディアクエリがサポートされていない場合でも、広告を表示できます。なお、外部スタイルシートで CSS を使って広告コードのサイズを設定することは、正式にはサポートされていません。

レスポンシブ広告ユニットのパフォーマンスをトラッキングする

レスポンシブ広告ユニットのパフォーマンスをトラッキングするには、[パフォーマンスレポート] タブで [広告サイズ] レポートを確認します。レスポンシブ広告ユニットのリクエストはすべて、このレポートに「レスポンシブ」と表示されます。

トップへ戻る