此页面由 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], []]
]