此页面由 Cloud Translation API 翻译。

随播广告

您可能希望将您的页内 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：基本广告位植入
示例 2：动态广告位实施
示例 3：预加载的广告位

示例 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>