このページは Cloud Translation API によって翻訳されました。

広告サイズ

定義するすべての広告スロットでは、そのスロットで配信可能な広告サイズを指定する必要があります。広告サイズの指定方法は、表示する広告の種類や広告スロット自体のサイズと柔軟性によって異なります。

場合によっては、Google アドマネージャーの広告申込情報レベルで広告サイズがオーバーライドされることがあります。詳しくは、ヘルプセンターをご覧ください。

このガイドで紹介するコード例の完全なコードは、広告サイズのサンプルページでご覧いただけます。

固定サイズの広告

単一の固定サイズで広告スロットを定義できます。

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

この例では、サイズが 300x250 のクリエイティブのみが配信されます。

キーポイント: 固定サイズの広告を使用する場合は、クリエイティブがレンダリングされる <div> 要素のサイズを定義することを強くおすすめします。クリエイティブは非同期でレンダリングされることが多いため、十分なスペースを確保していないと、ページ上の他の要素がずれる可能性があります。

複数サイズの広告

広告が複数のサイズをサポートしている場合は、広告スロットを定義するときにサポートされているサイズのリストを指定します。

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

この例では、サイズが 300x250、728x90、750x200 のクリエイティブを配信できます。アドマネージャーでは、広告選択プロセスでこれらのサイズに一致するクリエイティブのみが考慮されます。

CSS で広告スロット <div> のサイズが指定されていない場合、GPT では、display() の呼び出し時に、指定された最小の高さと最も幅の広い 1 ピクセルを超えるサイズにサイズが自動的に設定されます。この場合、750x90 になります。ただし、このサイズは、ページ上の他のコンテンツの読み込み後に行われるため、コンテンツがずれることがあります。レイアウトシフトを回避するには、レイアウトシフトを最小限に抑えるのガイドで説明されているように、CSS を使用してスペースを予約します。

複数サイズの広告を使用する場合は、指定された最大サイズの広告に対応できる十分な柔軟性をレイアウトに調整してください。これにより、クリエイティブが誤ってトリミングされるのを防ぐことができます。

Fluid 広告

Fluid 広告はサイズが固定されていませんが、表示されるクリエイティブコンテンツに合わせて調整されます。現在、アドマネージャーでサポートされている流動的な広告タイプはネイティブ広告のみです。

Fluid 広告を使用する場合、カスタムの fluid サイズが指定されることがあります。

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

この例では、広告スロットの幅は親コンテナと同じになり、高さはクリエイティブコンテンツに合わせて変更されます。GPT で広告スロットのサイズを変更する場合の手順は次のとおりです。

広告レスポンスが受信されます。
クリエイティブコンテンツは iframe に書き込まれます。初期の高さは 0px、幅は 100% に設定されます。
iframe 内のすべてのリソースの読み込みが完了すると、iframe の高さを iframe の <body> 要素の高さと同じ値に設定して、クリエイティブを表示できます。

レスポンシブ広告

レスポンシブ広告は複数サイズの広告に対応しており、リクエストを行うブラウザのビューポートのサイズに応じて、配信するクリエイティブのサイズを指定できます。この機能を使用して、さまざまな種類のデバイス（パソコン、タブレット、モバイルなど）に配信するクリエイティブのサイズを管理できます。

これを行うには、ビューポートサイズと広告サイズのマッピングを定義し、そのマッピングを広告スロットに関連付けます。

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

この例では、マッピングで次のように指定します。

ビューポートが 1024x768 以上の場合、サイズ 750x200 または 728x90 の広告を配信できます。
1024x768 > ビューポート >= 640x480 の場合、サイズ 300x250 の広告を配信できます。
ビューポートが 640x480 より小さい場合、広告は配信されません。

GPT は、リクエストを行ったブラウザのビューポートのサイズを検出し、そのサイズに収まる最大のマッピングを使用します。GPT の最大マッピングを決定する際、まず幅、高さ（[100, 10] > [10, 100]）。マッピングでエラーが発生した場合や、ビューポートのサイズを特定できない場合は、defineSlot() で指定されたサイズが使用されます。

次に、Slot.defineSizeMapping() メソッドを呼び出して、マッピングを広告スロットに関連付けます。このメソッドでは、次の形式のマッピングの配列を受け入れます。

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

この配列内のビューポートサイズの順序によって優先度が定義されます。上記の例で使用されている SizeMappingBuilder は、この形式の配列を生成する便利な方法です。サイズが自動的に大きいものから小さいものから順に並べられます。この例の場合、SizeMappingBuilder.build() の出力は次のようになります。

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]