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

隨播廣告

您可能會想將網頁內 HTML 廣告版位與影片建立關聯重疊廣告版位。而這些關聯廣告版位之間的關係做為 master-Companion 關係。

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

使用隨播廣告

如要使用隨播廣告，請執行下列步驟：

1. 預訂隨播廣告

您必須先預訂要與主廣告。隨播廣告可以是在 Ad Manager 中投放每則主廣告最多可放送六則隨播廣告。由一位買方控管網頁上的所有廣告時也稱為路障型廣告。

2. 請求隨播廣告

根據預設，系統會為每個廣告請求啟用隨播廣告。

3. 顯示隨播廣告

顯示隨播廣告的方法有兩種：

自動使用 Google 發布商廣告代碼 (GPT)
如果你使用 GPT 導入隨播廣告，只要在其中宣告隨播廣告版位，就會自動顯示而且這些廣告已經向 API 註冊 (也就是 div JavaScript 和 HTML 中的 ID 必須相符)。使用 GPT 的部分好處是：
- 可感知隨播廣告版位
- 發布商聯播網的隨播廣告候補 (如果 VAST) 回應中包含的隨播廣告數量少於 HTML 網頁上已定義的版位數量
- 如果缺少影片廣告，則以隨播廣告自動填入
- 適用於隨點即播影片播放器的預先載入隨播廣告版位
- 自動顯示隨播廣告，包括 HTMLResource 和 iFrameResource
手動使用 Ad API。

搭配 Google 發布商廣告代碼使用隨播廣告

Google 發布商廣告代碼 (GPT) 會自動顯示 HTML 隨播廣告。我們建議大多數發布商使用 GPT。如果系統在主網頁上載入 GPT，HTML5 SDK 就能辨識 GPT 版位 (不在 IFrame 中)。您可以參閱 GPT 文件中的 IMA SDK。

如果您在 IFrame 內代管 HTML5 SDK

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

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

如要在這種情況下顯示隨播廣告，您必須載入載入 SDK 前的 GPT Proxy 指令碼：

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

重要注意事項：

載入 SDK 的 IFrame 內不應載入任何 GPT。
GPT 必須在頂端載入，不得在其他 IFrame 中載入。
Proxy 指令碼必須在與 GPT 相同的頁框中 (也就是主頁面) 載入。

在 HTML 中宣告隨播廣告版位

本節說明如何使用 GPT 及也提供不同情境的程式碼範例如果是 HTML5 SDK，您必須在 HTML 網頁中加入某些 JavaScript，並宣告隨播廣告版位。

注意：在以下每個範例中，請務必請在記錄中提供有效的 network 和 unit-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>

立即試用

請參閱下列程式碼範例，瞭解可正常運作的實作內容。

範例 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：預先載入的廣告版位

在某些情況下，您可能需要在廣告版位中再依請求顯示隨播廣告。隨播廣告通常會隨著廣告請求一起請求影片廣告。這個要求可能會在網頁之後發生載入。例如，隨播廣告只能在使用者之後載入隨點即播影片。在這種情況下，您必須能夠一般廣告來填補廣告版位。目的地：符合這個使用情境，您可以在隨播廣告版位。確認網頁廣告已指定至隨播廣告版位。指定隨播廣告版位的方式與指定標準網頁廣告版位

注意：下列程式碼範例完全相同。在本此時，請提供預先載入廣告的廣告聯播網和單元路徑而不是影片廣告單元

以下為剛才說明的執行方式範例：

<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 設定廣告素材類型的隨播廣告篩選器、近乎相符的百分比、資源類型和大小條件如要進一步瞭解這些設定，請參見 HTML5 API 說明文件。

getCompanionAds 傳回的 CompanionAd 物件現在可以按照以下指南，在網頁上顯示隨播廣告：

建立必要大小的隨播廣告版位 <div> 網頁。
在 STARTED 事件後，請擷取 Ad 物件，方法是呼叫 getAd()。
使用 getCompanionAds() 來取得隨播廣告清單必須與隨播廣告版位大小 CompanionAdSelectionSettings，且具有相同序號做為主廣告素材缺少序列屬性的廣告素材為視為序號為 0。
從 CompanionAd 例項並設為該廣告版位的內部 HTMl <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 中建立新委刊項請參閱下圖，瞭解該值於何處設定。

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>