本頁面由 Cloud Translation API 翻譯而成。

廣告大小

您定義的每個廣告版位都必須指定能在該版位中放送的廣告大小。廣告大小的指定方式取決於要顯示的廣告類型，以及廣告版位本身的大小和彈性。

在某些情況下，Google Ad Manager 的委刊項層級可能會覆寫廣告大小。詳情請造訪說明中心。

如需本指南內範例的完整程式碼，請參閱「廣告大小」範例網頁。

固定大小廣告

您可以定義單一固定大小的廣告版位。

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 的廣告素材可以放送。Ad Manager 只會在廣告選擇程序期間，考慮符合這些大小的廣告素材。

如未為 CSS 中的廣告版位 <div> 指定尺寸，當呼叫 display() 時，GPT 會自動將尺寸設為宣告的最短高度和宣告的寬度 (超過 1 像素)。在本例中會是 750x90。不過，一旦網頁載入的其他內容導致內容移動，就可能發生這種大小調整的情形。為避免版面配置位移，請按照「盡量減少版面配置位移」指南中的說明，使用 CSS 保留空間。

使用多種大小的廣告時，請確認您的版面配置夠靈活，可支援指定最大尺寸的廣告。這可避免廣告素材意外裁剪

自動調整廣告

自動調整廣告沒有固定大小，而是會配合顯示的廣告素材內容進行調整。原生廣告是 Ad Manager 目前唯一支援的自動調整廣告類型。

使用自動調整廣告時，您可以指定自訂 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], []]
]