您定义的每个广告位都必须指定可在相应广告位中投放的广告尺寸。广告尺寸的指定方式取决于要展示的广告类型,以及广告位本身的尺寸和灵活性。
在某些情况下,广告尺寸可能会在 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], []]
]