ウェブサイトを表示するブラウザに応じて自動的にサイズ調整されるレスポンシブ広告を作成するには、Google パブリッシャー タグ（GPT）を使用します。これにより、パソコン、タブレット、モバイル デバイスなど、どのような環境でも最適に広告が表示されます。
GPT API を使うと、広告スロットのサイズセットとして複数のサイズを指定できます。レスポンシブ広告の機能を使用する際は、ブラウザのサイズを基準にした別のサイズセットも選択できます。
例
ブラウザのサイズが 1024×768 より大きい場合は 970x90 か 728x90 のサイズの広告が配信され、それより小さいブラウザの場合は 468x60 の広告のみが配信されるように指定できます。
パソコン、タブレット、モバイル デバイスごとに異なるサイズ マッピングを指定することもできます。
- ブラウザのサイズとは、実際にはビューポートのサイズ、つまりコンテンツが表示される領域のことを指します。
- ブラウザのツールバー、スクロールバー、枠線などは含まれません。
サイズ マッピングの順序は、最適なサイズのクリエイティブが使用されるよう自動的に決まります。ブラウザに合うサイズがない場合には、どのサイズのブラウザにも合うデフォルトの広告ユニットのサイズを指定して広告を配信できます。
レスポンシブ広告は、動画コンパニオン広告ではサポートされていません。
ブラウザと広告のサイズを指定する
定義するすべての広告スロットについて、配信可能な広告のサイズを指定する必要があります。広告サイズの指定方法は、表示する広告のタイプや広告スロット自体のサイズおよび柔軟性によって異なります。
GPT デベロッパー ドキュメントでは、固定サイズの広告、複数サイズの広告、レスポンシブ広告などのコードサンプルを紹介しています。
空の広告スロットを折りたたむ
ページ上の広告スロットが埋まらないことがあるとわかっている場合は、タグに collapseEmptyDivs() メソッドを追加して、空の div を折りたたむようブラウザに指示することができます。
このメソッドを使用すると、ページのコンテンツがリフローされることがあります。そのため、広告スロットが埋まると予想される頻度に応じて使用方法を検討する必要があります。
空の <div> を折りたたむには、collapseEmptyDivs() メソッドを使用します。使用しない場合、広告が広告スロットに配信されなかったときに空白のスペースがページ上に表示されます。
レスポンシブ広告を入稿する
GPT ライブラリでレスポンシブ広告を作成すると、ブラウザサイズやデバイスに基づいて広告が表示されます。デバイスの画面サイズに応じた大きさの広告がマッピング機能によりアド マネージャーにリクエストされます。
アド マネージャーでレスポンシブ AdSense タグを入稿することはできません。代わりに、該当のページに GPT を使用してレスポンシブ タグを実装する必要があります。AdSense タグの高さと幅は、AdSense でサポートされるディスプレイ広告フォーマットに沿って指定してください。
例
AdSense タグを使って、モバイルに 320x100 サイズ、タブレットに 300x250 サイズ、パソコンに 336x280 サイズを表示するレスポンシブ広告を実装するとします。
- GPT を使用してレスポンシブ広告をウェブページに追加します。
- AdSense 広告申込情報を作成し、320x100、300x250、336x280 の 3 つのサイズを指定します。
- レスポンシブ タグの作成に使用した広告ユニットを広告申込情報のターゲットに指定します。
- 各サイズに対応する 3 つのクリエイティブを AdSense 広告申込情報に追加し、それぞれのクリエイティブで AdSense コードが入稿されるようにします。
