此页面由 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。如果 GPT 是在主网页（而非 IFrame）上加载的，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 方法调用中提供有效的 network 和 unit-path（位于 <head> 或 <body> 标记中，具体取决于您使用的实际示例）。

示例 1：基本广告展示位置植入
示例 2：动态广告位植入
示例 3：预加载的广告位

示例 1：基本广告位实施

以下示例代码展示了如何在 HTML 页面中添加 gpt.js 文件并声明广告展示位置。声明的广告位尺寸为 728x90px。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>

试试看

您可以查看以下 CodePen，了解可正常运行的实现。

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

试试看

您可以查看以下 CodePen，了解有效的实现方式。

将配套广告与 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 现在支持自适应随播广告。这些随播广告可以调整大小，以匹配广告位的尺寸。它们会填充父 div 的 100% 宽度，然后调整高度以适应配套内容。您可以在 Ad Manager 中使用 Fluid 副屏尺寸进行设置。请参阅下图，了解在哪里设置此值。

一张图片，显示了 Ad Manager 的随播广告设置。突出显示“随播广告素材尺寸”选项。

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>