本頁面由 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。如果主頁 (而非 IFrame 中) 已載入 GPT，HTML5 SDK 就會識別 GPT 版位。如要進一步瞭解如何搭配 IMA SDK 使用 GPT，請參閱 GPT 文件。

如果您在 IFrame 內代管 HTML5 SDK

如果您同時符合以下兩項條件，就必須加入額外的 Proxy 指令碼，才能正確顯示 GPT 隨播廣告：

在 IFrame 中載入 HTML5 SDK。
在主網頁上 (在 IFrame 以外) 載入 GPT。

如要在此情境中顯示隨播廣告，您必須先載入 GPT Proxy 指令碼，再載入 SDK：

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

重要注意事項：

在載入 SDK 的 IFrame 中不應載入任何 GPT。
GPT 必須在主頁上載入，不能在其他 IFrame 中載入。
Proxy 指令碼必須在與 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 現在支援自動調整隨播廣告。這些隨播廣告可依照廣告版位的大小調整大小。它們會填滿父項 div 的 100%，然後根據隨播廣告的內容重新調整高度。您可以利用 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>