หน้านี้ได้รับการแปลโดย Cloud Translation API

โฆษณาที่แสดงร่วม

คุณอาจต้องการเชื่อมโยงช่องโฆษณา HTML ในหน้าเว็บกับวิดีโอ หรือ ช่องโฆษณาซ้อนทับ ความสัมพันธ์ระหว่างช่องโฆษณาที่เกี่ยวข้องนี้อ้างอิงถึง เป็นความสัมพันธ์ที่แสดงร่วมหลัก

นอกจากการขอโฆษณาวิดีโอและโฆษณาซ้อนทับหลัก คุณสามารถใช้ IMA SDK เพื่อแสดง โฆษณาแบบ HTML ที่แสดงร่วมกัน โฆษณาเหล่านี้แสดงอยู่ภายใน HTML ของคุณ

ใช้โฆษณาที่แสดงร่วม

หากต้องการใช้โฆษณาที่แสดงร่วม ให้ทำตามขั้นตอนต่อไปนี้

1. จองโฆษณาที่แสดงร่วม

ก่อนอื่นคุณต้องจองโฆษณาที่แสดงร่วมที่ต้องการแสดงพร้อมกับ โฆษณาหลัก โฆษณาที่แสดงร่วมกันสามารถเป็น ที่ดูแลการแสดงใน Ad Manager คุณสามารถแสดงโฆษณาที่แสดงร่วมได้สูงสุด 6 รายการต่อโฆษณาหลัก เทคนิคนี้ เมื่อผู้ซื้อรายเดียวควบคุมโฆษณาทั้งหมดในหน้านั้น ที่เรียกว่า Roadblock

2. ขอโฆษณาที่แสดงร่วม

โดยค่าเริ่มต้น ระบบจะเปิดใช้โฆษณาที่แสดงร่วมสำหรับคำขอโฆษณาแต่ละรายการ

3. โฆษณา Display ที่แสดงร่วม

มี 2 วิธีในการแสดงโฆษณาที่แสดงร่วม

โดยอัตโนมัติโดยใช้แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT)
หากคุณกำลังใช้ GPT เพื่อนำโฆษณาที่แสดงร่วมมาใช้ แสดงโดยอัตโนมัติตราบใดที่ยังมีการประกาศช่องโฆษณาที่แสดงร่วม บนหน้า HTML และโฆษณาเหล่านี้จะลงทะเบียนกับ API (ซึ่งก็คือ div รหัสใน JavaScript และ HTML ต้องตรงกัน) ประโยชน์บางประการของการใช้ GPT ได้แก่
- การรับรู้ช่องโฆษณาที่แสดงร่วม
- โฆษณาทดแทนร่วมจากเครือข่ายของผู้เผยแพร่โฆษณา หาก VAST การตอบกลับมีโฆษณาที่แสดงร่วมน้อยกว่าช่องโฆษณาที่กำหนดไว้ในหน้า HTML
- การป้อนข้อความอัตโนมัติที่แสดงร่วมกันในกรณีที่โฆษณาวิดีโอขาดหายไป
- ช่องโฆษณาที่แสดงร่วมที่โหลดไว้ล่วงหน้าสำหรับโปรแกรมเล่นวิดีโอแบบคลิกเพื่อเล่น
- การแสดงผลโฆษณาที่แสดงร่วมอัตโนมัติ รวมถึง HTMLResource และ iFrameResource
ด้วยตนเองโดยใช้ Ad API

ใช้โฆษณาที่แสดงร่วมกับแท็กผู้เผยแพร่โฆษณาผ่าน Google

แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) ทำให้การแสดง HTML เป็นแบบอัตโนมัติ โฆษณาที่แสดงร่วมในเว็บไซต์ของคุณ เราแนะนำให้ผู้เผยแพร่โฆษณาส่วนใหญ่ใช้ GPT HTML5 SDK รู้จักช่อง GPT หากมีการโหลด GPT ในหน้าเว็บหลัก (ไม่ใช่ใน IFrame) คุณสามารถค้นหาข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับการใช้ GPT กับ IMA SDK ในเอกสาร GPT

หมายเหตุ: เมื่อคุณใช้ SDK โฆษณาสื่ออินเทอร์แอกทีฟของ Google สำหรับการแสดงโฆษณา เมตริกที่รายงาน กลับไปยังเซิร์ฟเวอร์โฆษณาอาจรวมถึงการที่ผู้เข้าชมโต้ตอบกับหน้าเว็บ ที่มีการแสดงโฆษณา คุณควรเปิดเผยข้อมูลนี้แก่ผู้เข้าชมเพื่อให้สอดคล้องกับข้อมูล ข้อกำหนดในการรวบรวมและเปิดเผยการใช้งานในสัญญาที่คุณทำกับ Google

ถ้าคุณโฮสต์ HTML5 SDK ภายใน iframe

หากคุณมีคุณสมบัติตามเกณฑ์ทั้ง 2 ข้อต่อไปนี้ คุณต้องระบุแอตทริบิวต์ สคริปต์พร็อกซีเพื่อให้การแสดงร่วม GPT แสดงได้อย่างถูกต้อง

โหลด HTML5 SDK ใน IFrame
โหลด GPT บนหน้าเว็บหลัก (นอก IFrame)

หากต้องการให้โฆษณาที่แสดงร่วมแสดงในสถานการณ์นี้ คุณต้องโหลด สคริปต์พร็อกซี GPT ก่อนโหลด SDK

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

สิ่งสำคัญที่ต้องคำนึงถึง:

ไม่ควรมีการโหลด GPT ภายใน iframe ที่โหลด SDK
ต้องโหลด GPT ที่หน้าแรก ไม่ใช่ใน IFrame อื่น
สคริปต์พร็อกซีต้องโหลดในเฟรมเดียวกันกับ GPT (ซึ่งก็คือบนหน้าหลัก)

ประกาศช่องโฆษณาที่แสดงร่วมใน HTML

ส่วนนี้อธิบายวิธีประกาศโฆษณาที่แสดงร่วมใน HTML โดยใช้ GPT และ มีโค้ดตัวอย่างสำหรับสถานการณ์ต่างๆ สำหรับ HTML5 SDK คุณสามารถ คุณต้องเพิ่ม JavaScript ในหน้า HTML และประกาศโฆษณาที่แสดงร่วม

หมายเหตุ: ในแต่ละตัวอย่างต่อไปนี้ โปรดตรวจสอบว่าคุณได้ ระบุ network และ unit-path ที่ถูกต้องใน การเรียกใช้เมธอด googletag.defineSlot (อยู่ในส่วน <head> หรือ <body> ทั้งนี้ขึ้นอยู่กับตัวอย่างจริงที่คุณใช้)

ตัวอย่างที่ 1: การใช้งานช่องโฆษณาพื้นฐาน
ตัวอย่างที่ 2: การใช้งานช่องโฆษณาแบบไดนามิก
ตัวอย่างที่ 3: ช่องโฆษณาที่โหลดไว้ล่วงหน้า

ตัวอย่างที่ 1: การใช้งานช่องโฆษณาพื้นฐาน

โค้ดตัวอย่างต่อไปนี้แสดงวิธีรวมไฟล์ gpt.js ในหน้า HTML และ ต้องประกาศช่องโฆษณา ช่องโฆษณาที่ประกาศคือ 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

โฆษณา Display ที่แสดงร่วม

หากต้องการแสดงโฆษณาที่แสดงร่วม ให้รับการอ้างอิงออบเจ็กต์ Ad ก่อน ผ่านเหตุการณ์ AdEvent ใดๆ ที่ส่งจาก AdsManager เราขอแนะนำให้ใช้เหตุการณ์ AdEvent.STARTED เพื่อแสดง โฆษณาที่แสดงร่วมควรสอดคล้องกับการแสดงโฆษณาหลัก

ถัดไป ให้ใช้ออบเจ็กต์ Ad นี้เพื่อเรียก getCompanionAds() เพื่อ รับอาร์เรย์ของออบเจ็กต์ CompanionAd รายการ ที่นี่มีตัวเลือก ซึ่งระบุ CompanionAdSelectionSettings ซึ่งจะช่วยให้คุณ ตั้งค่าตัวกรองในโฆษณาที่แสดงร่วมสำหรับประเภทครีเอทีฟโฆษณา เป็นเปอร์เซ็นต์ที่พอดี ประเภททรัพยากร และเกณฑ์ขนาด โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าเหล่านี้ที่ เอกสารประกอบของ HTML5 API

ออบเจ็กต์ CompanionAd ที่แสดงผลโดย getCompanionAds สามารถใช้เพื่อแสดงโฆษณาที่แสดงร่วมในหน้าเว็บโดยใช้หลักเกณฑ์ต่อไปนี้

สร้างช่องโฆษณาที่แสดงร่วม <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 รองรับโฆษณาที่แสดงร่วมแบบไหลแล้ว โฆษณาที่แสดงร่วมเหล่านี้สามารถปรับขนาด เพื่อให้พอดีกับขนาดของช่องโฆษณา ขยายเต็ม 100% ของความกว้างของ div ระดับบนสุด จากนั้นปรับขนาด ให้พอดีกับเนื้อหาของโฆษณาที่แสดงร่วม ตั้งค่าได้โดยใช้ขนาดโฆษณาที่แสดงร่วม Fluid ใน Ad Manager โปรดดูตำแหน่งที่สามารถกำหนดค่าได้จากรูปภาพต่อไปนี้

รูปภาพแสดงการตั้งค่าโฆษณาที่แสดงร่วมของ Ad Manager ไฮไลต์ตัวเลือกขนาดโฆษณาที่แสดงร่วม

โฆษณาที่แสดงร่วมกันแบบไหลของ GPT

เมื่อใช้การแสดงร่วม GPT คุณสามารถประกาศช่องการแสดงร่วมแบบไหลได้โดยการอัปเดต พารามิเตอร์ที่ 2 ของเมธอด 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>