您可能希望将您的页内 HTML 广告位与视频或重叠式广告位相关联。相关联的广告位之间的这种关系称为“主/随播”关系。
除了请求视频和重叠式广告主广告之外,您还可以使用 IMA SDK 展示 HTML 随播广告。这些广告会在 HTML 环境中展示。
使用随播广告
要使用随播广告,请执行以下步骤:
1. 预订随播广告
您必须先预订要与主广告一起展示的随播广告。随播广告可 在 Ad Manager 中进行投放管理。对于每个主广告,您最多可以投放 6 个随播广告。 当单个买方控制页面上的所有广告时,这种方法也称为包版。
2. 请求随播广告
默认情况下,系统会为每个广告请求启用随播广告。
3. 展示随播广告
展示随播广告的方法有两种:
- 自动使用 Google 发布商代码 (GPT)
如果您使用 GPT 植入随播广告,只要 HTML 网页上声明了随播广告位,并且这些广告已通过 API 注册(即 JavaScript 和 HTML 中的 div ID 必须一致),它们就会自动展示。使用 GPT 具有以下优势:- 随播广告位认知度
- 来自发布商网络的随播补余广告(如果 VAST 响应包含的随播广告少于 HTML 网页上定义的广告位数量)
- 缺少视频广告时可自动填充随播广告
- 为点击播放视频播放器预加载的随播广告位
- 自动随播广告呈现,包括
HTMLResource
和iFrameResource
- 手动使用 Ad API。
将随播广告与 Google 发布商代码结合使用
Google 发布商代码 (GPT) 会自动在您的网站上展示 HTML 随播广告。我们建议大多数发布商使用 GPT。如果在主网页(而非 iframe 中)加载 GPT,HTML5 SDK 可识别 GPT 广告位。如需详细了解如何将 GPT 与 IMA SDK 搭配使用,请参阅 GPT 文档。
如果您在 iframe 中托管 HTML5 SDK
如果您同时满足以下两个条件,则需要添加额外的代理脚本,以便 GPT 随播广告素材能够正确展示:
- 在 iframe 中加载 HTML5 SDK。
- 在主网页上(在 iframe 之外)加载 GPT。
若要在这种情况下展示随播广告素材,您必须先加载 GPT 代理脚本,然后再加载 SDK:
<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>
重要注意事项:
- 不应在加载 SDK 的 IFrame 内加载 GPT。
- GPT 必须在顶部网页,而不是在其他 IFrame 中加载。
- 代理脚本必须在与 GPT 相同的帧中加载(即在主网页上加载)。
在 HTML 中声明随播广告位
本部分介绍了如何使用 GPT 在 HTML 中声明随播广告,并提供了适用于不同情况的示例代码。对于 HTML5 SDK,您需要在 HTML 网页中添加一些 JavaScript 并声明随播广告位。
注意:在下面的每个示例中,请务必在 googletag.defineSlot
方法调用(位于 <head> 或 <body> 标记中,具体取决于您使用的实际示例)中提供有效的 network
和 unit-path
。
示例 1:基本广告位实施
以下示例代码展示了如何在 HTML 网页中添加 gpt.js
文件并声明广告位。声明的广告位为 728x90 像素。GPT 会尝试使用 VAST 响应中返回且与此尺寸匹配的所有随播广告填充广告位。声明广告位后,googletag.display()
函数可以在网页上的任何位置调用这些广告位来呈现这些广告位。由于这些广告位是随播广告位,因此广告不会立即展示。而是展示在主视频广告旁边。
下面是一个实现示例:
<html> <head> <!-- Uncomment the line below for the HTML5 SDK caveat proxy --> <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>--> <!-- HEAD part --> <!-- Initialize the tagging library --> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <!-- Register your companion slots --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> <body> <!-- BODY part --> <!-- Declare a div where you want the companion to appear. Use googletag.display() to make sure the ad is displayed. --> <div id="companionDiv" style="width:728px; height:90px;"> <script> // Using the command queue to enable asynchronous loading. // The unit does not actually display now - it displays when // the video player is displaying the ads. googletag.cmd.push(function() { googletag.display('companionDiv'); }); </script> </div> <body> </html>
试试看
您可以看到以下代码笔,查看正常运行的实现。
示例 2:动态广告位实施
有时,在网页内容呈现之前,您可能不知道网页上有多少广告位。以下示例代码展示了如何在网页呈现时定义广告位。此示例与示例 1 相同,只不过前者注册了实际展示广告的广告位。
注意:当视频播放器要展示广告时,它会请求这些广告位。确保在播放器展示广告之前定义广告位。
<html> <head> <!-- Uncomment the line below for the HTML5 SDK caveat proxy --> <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> --> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> <!-- HEAD part --> <!-- Initialize the tagging library --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> <body> <!-- BODY part --> <!-- Declare a div where you want the companion to appear. Use googletag.display() to make sure the ad is displayed. --> <div id="companionDiv" style="width:728px; height:90px;"> <script> // Using the command queue to enable asynchronous loading. // The unit does not actually display now - it displays when // the video player is displaying the ads. googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.display('companionDiv'); }); </script> </div> <body> </html>
试试看
对于正常运行的实现,您可以查看以下代码。
示例 3:预载的广告位
在某些情况下,您可能需要在请求随播广告之前在广告位中展示内容。随播广告通常会与视频广告一起请求。此请求可能在网页加载后发生。例如,随播广告只能在用户点击点击播放视频后才加载。在这种情况下,您需要能够在请求随播广告之前请求常规广告填充广告位。为了支持此用例,您可以在随播广告位中展示标准网站广告。确保网络广告定位至随播广告位。 定位随播广告位的方式与定位标准网站广告位相同。
注意:以下示例代码与示例 1 中提供的代码完全相同,但粗体部分除外。在这种情况下,您需要提供预加载广告的广告联盟和单元路径,而不是视频广告单元。
以下是刚才描述的实现示例:
<html> <head> ... <!-- Register your companion slots --> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(function() { // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH. googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script> </head> ... </html>
试试看
您可以查看以下代码笔,查看可正常工作的实现。
将随播广告与 Ad API 结合使用
本部分介绍如何使用 Ad
API 展示随播广告。
展示随播广告
如需展示随播广告,请先通过从 AdsManager
分派出的任意 AdEvent
事件获取对 Ad
对象的引用。我们建议您使用 AdEvent.STARTED
事件,因为展示随播广告应与主广告同时展示。
接下来,使用此 Ad
对象调用 getCompanionAds()
,以获取 CompanionAd
对象的数组。在这里,您可以选择指定 CompanionAdSelectionSettings
,以便针对随播广告设置过滤条件,包括广告素材类型、近似匹配百分比、资源类型和尺寸条件。如需详细了解这些设置,请参阅
HTML5 API 文档。
现在,可以根据以下指南,使用 getCompanionAds
返回的 CompanionAd
对象在网页上展示随播广告:
- 在网页上创建一个所需尺寸的随播广告位
<div>
。 - 在
STARTED 事件的事件处理脚本中,通过调用
getAd()
来检索Ad
对象。 - 使用
getCompanionAds()
获取与随播广告位尺寸和CompanionAdSelectionSettings
均匹配且与主广告素材具有相同的序列号的随播广告列表。缺少序列属性的广告素材将被视为序列号为 0。 - 从
CompanionAd
实例获取内容,并将其设置为相应广告位的<div>
的内部 HTMl。
示例代码
<!--Set a companion ad div in html page. --> <div id="companion-ad-300-250" width="300" height="250"></div> <script> // Listen to the STARTED event. adsManager.addEventListener( google.ima.AdEvent.Type.STARTED, onAdEvent); function onAdEvent(adEvent) { switch (adEvent.type) { case google.ima.AdEvent.Type.STARTED: // Get the ad from the event. var ad = adEvent.getAd(); var selectionCriteria = new google.ima.CompanionAdSelectionSettings(); selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC; selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE; selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE; // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings var companionAds = ad.getCompanionAds(300, 250, selectionCriteria); var companionAd = companionAds[0]; // Get HTML content from the companion ad. var content = companionAd.getContent(); // Write the content to the companion ad slot. var div = document.getElementById('companion-ad-300-250'); div.innerHTML = content; break; } } </script>
展示自适应随播广告
IMA 现在支持自适应随播广告。这些随播广告可以调整大小以匹配广告位的尺寸。它们会填满 100% 的父级 div,然后再调整其高度以适应随播广告素材的内容。您可以在 Ad Manager 中使用 Fluid
随播广告尺寸来设置此类尺寸。如需了解设置此值的位置,请参阅下图。
GPT 自适应随播广告素材
使用 GPT 随播广告时,您可以通过更新 defineSlot()
方法的第二个参数来声明自适应随播广告位。
<!-- Register your companion slots --> <script> googletag.cmd.push(function() { // Supply YOUR_NETWORK and YOUR_UNIT_PATH. googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv') .addService(googletag.companionAds()) .addService(googletag.pubads()); googletag.companionAds().setRefreshUnfilledSlots(true); googletag.pubads().enableVideoAds(); googletag.enableServices(); }); </script>
Ad API 自适应随播广告素材
针对随播广告使用 Ad API 时,您可以通过将 google.ima.CompanionAdSelectionSettings.sizeCriteria
更新为 SELECT_FLUID
值来声明自适应随播广告位。
<script> ... // Get the ad from the event. var ad = adEvent.getAd(); var selectionCriteria = new google.ima.CompanionAdSelectionSettings(); selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC; selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE; selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID; // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings // Note: Companion width and height are irrelevant when fluid size is used. var companionAds = ad.getCompanionAds(0, 0, selectionCriteria); var companionAd = companionAds[0]; ... } } </script>