广告尺寸

您定义的每个广告位都必须指定该广告位中可以投放的广告尺寸 。广告尺寸的指定方式因要投放的广告类型而异 以及广告位本身的尺寸和灵活性

在某些情况下，广告尺寸可能会在订单项级别被覆盖， 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], "fluid"],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

在本例中，尺寸为 300x250、728x90 和 750x200 的广告素材可 。Ad Manager 只会考虑与这些尺寸匹配的广告素材 在广告选择流程中触发。

如果您没有在 CSS 中为广告位 <div> 指定尺寸， GPT 会自动将尺寸设为 调用 display() 时，声明的高度和最大声明宽度（超过 1px）。 在本例中为 750x90。不过，此容量调整操作 网页上的其他内容已加载，导致这些内容发生移位。为避免 请使用 CSS 文件预留空间 尽量减少布局偏移指南。

使用多尺寸广告时，请确保您的布局足够灵活， 支持使用指定的最大尺寸的广告。这样可避免 意外剪裁。

自适应广告

自适应尺寸广告没有固定的尺寸，但会根据它们的广告素材内容进行调整 。原生广告是目前唯一的自适应广告 Ad Manager 支持的类型。

使用自适应广告时，可以指定自定义 fluid 尺寸。

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

在此示例中，广告位的宽度将与其父级容器的宽度相同， 调整其高度以适应广告素材内容。GPT 的步骤 调整广告位大小的步骤如下：

  1. 收到广告响应。
  2. 广告素材内容已写入 iframe，初始高度设为 0px 宽度设置为 100%。
  3. 在 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], []]
]