此页面由 Cloud Translation API 翻译。

随播广告

您可能希望将您的页内 HTML 广告位与视频或重叠式广告位。关联的广告位之间的这种关系称为 主随播关系。

除了请求视频广告和重叠式主广告外，您还可以使用 IMA SDK 展示 HTML 随播广告。这些广告在 HTML 中展示环境

使用随播广告

要使用随播广告，请执行以下步骤：

1. 预订随播广告

您必须先预订要随主广告。随播广告可以 <ph type="x-smartling-placeholder"></ph> 在 Ad Manager 中投放。每个主广告最多可以投放 6 个随播广告。如果某个买方控制页面上的所有广告，那么这种方法同样适用于称为包版。

2. 请求随播广告

默认情况下，系统会为每个广告请求启用随播广告。

3. 展示随播广告

呈现随播广告的方法有两种：

自动使用 Google 发布商代码 (GPT)
如果您使用 GPT 来实施随播广告那么只要您声明了随播广告位并且这些广告已向 API 注册（即 div （例如 JavaScript 和 HTML 中的 ID）必须匹配）。使用 GPT 的一些优势分别是： <ph type="x-smartling-placeholder">
- 随播广告位认知度
- 来自发布商广告联盟的随播补余广告（如果 VAST 响应包含的随播广告少于 HTML 网页上定义的广告位
- 视频广告缺失时可自动填充随播广告
- 针对点击播放视频播放器的预加载随播广告位
- 自动随播广告呈现，包括 HTMLResource 和 iFrameResource
手动使用 Ad API。

将随播广告与 Google 发布商代码结合使用

Google 发布商代码 (GPT) 可自动展示 HTML 随播广告。我们建议大多数发布商使用 GPT。通过如果在主网页上加载 GPT，HTML5 SDK 可以识别 GPT 广告位（而不是在 iframe 中）。有关使用 GPT 的更多详细信息，请参见 GPT 文档中的 IMA SDK。

如果您在 iframe 中托管 HTML5 SDK

如果您同时满足以下两个条件，则需要添加额外的代理脚本，确保 GPT 随播广告正确展示：

在 iframe 中加载 HTML5 SDK。
在主网页上（在 iframe 之外）加载 GPT。

在这种情况下，要展示您的随播广告素材，您必须加载加载 SDK 前的 GPT 代理脚本：

<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 并声明随播广告。

注意：在以下每个示例中，请务必请在networkunit-path googletag.defineSlot 方法调用（位于 <head> 或 <body>标记，具体取决于您使用的实际示例）。

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

试试看

对于可正常工作的实现，请参阅以下 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>

试试看

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

通过 Ad API 使用随播广告

本部分将介绍如何使用 Ad API 展示随播广告。

展示随播广告

要展示随播广告，请先获取对 Ad 对象的引用通过从 AdsManager 分派的任何 AdEvent 事件传递。我们建议使用 AdEvent.STARTED 事件，因为随播广告应与主广告同时展示。

接下来，使用此 Ad 对象调用 getCompanionAds()，以获取 CompanionAd 对象的数组。在这里，您可以选择指定 CompanionAdSelectionSettings，让您可以根据广告素材类型、近似匹配百分比、资源类型和大小条件如需详细了解这些设置，请参阅 <ph type="x-smartling-placeholder"></ph> HTML5 API 文档。

getCompanionAds 返回的 CompanionAd 对象现可根据以下准则在网页上展示随播广告：

创建一个所需尺寸的随播广告位 <div> 。
在 <ph type="x-smartling-placeholder"></ph> STARTED 事件，检索 <ph type="x-smartling-placeholder"></ph> Ad 对象（通过调用 getAd()。
使用 getCompanionAds()，以获取与随播广告位尺寸和 CompanionAdSelectionSettings 且序列号相同作为主广告素材。缺少序列属性的广告素材将被视为序列号为 0。
从 <ph type="x-smartling-placeholder"></ph> CompanionAd实例，并将其设置为该广告位 <div>。

示例代码

<!--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%，然后调整其尺寸高度。这些尺寸是使用 Fluid 随播广告尺寸进行设置的在 Ad Manager 中如需了解设置此值的位置，请参见下图。

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