広告サイズ

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

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

このガイドのサンプルコードの全文は、サイズのサンプルページをご覧ください。

固定サイズの広告

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

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

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

重要なポイント: 固定サイズの広告を使用する場合は、クリエイティブがレンダリングされる <div> 要素のサイズを定義します。以降多くの場合、クリエイティブは非同期でレンダリングされるため、十分なスペースがない場合にページを移動します。

複数サイズの広告

広告が複数のサイズに対応している場合は、 2 つのオプションがあります

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

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

CSS の広告スロット <div> にサイズが指定されていない場合、 GPT では、ディメンションが自動的に display() が呼び出されたときに宣言された高さと、1 ピクセルを超えて宣言された最大の幅。この場合は 750x90 です。ただし、このサイジングはそのページの他のコンテンツが読み込まれ、そのコンテンツが移動している。避けるべきことレイアウトシフトを設定するか、レイアウトシフトの最小化に関するガイドをご覧ください。

複数サイズの広告を使用する場合は、サイズが指定された最大サイズの広告をサポートします。これによりクリエイティブが誤って切り抜かれた場合です

Fluid 広告

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

Fluid 広告を使用する場合は、カスタムの fluid サイズを指定できます。

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

この例の広告スロットの幅は、親コンテナの幅と、クリエイティブコンテンツに合わせて高さをサイズ変更します。GPT の手順次のような処理を行います。

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

で確認できます。 <ph type="x-smartling-placeholder">

レスポンシブ広告

レスポンシブ広告は複数サイズの広告を拡張し、広告のサイズをブラウザのビューポートのサイズに基づいて広告がリクエストできます。この機能を使用すると、配信されるクリエイティブのサイズを制御できます。デバイスの種類（パソコン、タブレット、モバイルなど）に応じて分類できます。

そのためには、ビューポートのサイズと広告サイズの間のマッピングをそのマッピングを広告スロットに関連付けます

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], []]
]