您定义的每个广告位都必须指定可以在此广告位中投放的广告尺寸。指定广告尺寸的方式取决于要展示的广告类型,以及广告位本身的尺寸和灵活性。
在某些情况下,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>
元素的高度,从而将广告素材设为可见。
自适应广告
自适应广告可扩展多尺寸广告,可让您根据发出请求的浏览器视口的尺寸指定要投放的广告素材的尺寸。此功能可用于控制投放到不同类型设备(桌面设备、平板电脑、移动设备等)的广告素材的尺寸。
这可以通过定义视口尺寸与广告尺寸之间的映射,然后将该映射与广告位相关联来实现。
var responsiveAdSlot = googletag.defineSlot('/6355419/Travel/Europe', [[300, 250], [728, 90], [750, 200]], 'responsive-ad') .addService(googletag.pubads()); var 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], []]
]