本頁面由 Cloud Translation API 翻譯而成。

隨播廣告

您可能會想將網頁內 HTML 廣告版位與影片或疊加廣告版位建立關聯。相關廣告插播位置之間的這種關係稱為「主-隨播」關係。

除了請求影片和重疊主廣告外，您也可以使用 IMA SDK 顯示隨播 HTML 廣告。這類廣告會顯示在 HTML 環境中。

使用隨播廣告

如要使用隨附廣告，請按照下列步驟操作：

1. 預訂隨播廣告

您必須先預訂要與主廣告一同放送的隨播廣告。您可以在 Ad Manager 中投放隨播廣告。每個主要廣告最多可放送六個隨播廣告。當單一買方控制網頁上的所有廣告時，這種做法也稱為路障。

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

如果您同時符合下列兩項條件，就必須加入額外的 Proxy 指令碼，才能正確顯示 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 檔案，並宣告廣告插播位置。宣告的廣告版位為 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 顯示隨播廣告。

顯示隨播廣告

如要顯示隨附廣告，請先透過 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>