เพิ่มการรองรับโฆษณาที่แสดงร่วมกัน

เลือกแพลตฟอร์ม: HTML5 Android iOS

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

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

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

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

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

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

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

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

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

คุณแสดงโฆษณาที่แสดงร่วมได้ 2 วิธีดังนี้

  • โดยอัตโนมัติ โดยใช้แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT)

    หากใช้ GPT เพื่อติดตั้งใช้งานโฆษณาที่แสดงร่วม ระบบจะแสดงโฆษณาที่แสดงร่วมโดยอัตโนมัติ ตราบใดที่มีช่องโฆษณาที่แสดงร่วมที่ประกาศในหน้า HTML และโฆษณาเหล่านี้ลงทะเบียนกับ API (กล่าวคือ div ID ใน JavaScript และ HTML ต้องตรงกัน) ข้อดีบางประการของการใช้ GPT มีดังนี้

    • การรับรู้สล็อตที่แสดงร่วมกัน
    • ส่งโฆษณาทดแทนที่แสดงร่วมจากเครือข่ายของผู้เผยแพร่โฆษณา หากการตอบสนองด้วย VAST มีโฆษณาที่แสดงร่วมจำนวนน้อยกว่าช่องที่กำหนดไว้ในหน้า HTML
    • ป้อนข้อมูลแบนเนอร์ที่แสดงร่วมกันโดยอัตโนมัติหากไม่มีโฆษณาวิดีโอ
    • ช่องโฆษณาที่แสดงร่วมที่โหลดล่วงหน้าสำหรับวิดีโอเพลเยอร์แบบคลิกเพื่อเล่น
    • การแสดงโฆษณาที่แสดงร่วมอัตโนมัติ รวมถึง HTMLResource และ iFrameResource

  • ด้วยตนเองโดยใช้ Ad API

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

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

หากคุณโฮสต์ HTML5 SDK ภายใน IFrame

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

  1. โหลด HTML5 SDK ใน IFrame
  2. โหลด 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 และ แสดงโค้ดตัวอย่างสำหรับสถานการณ์ต่างๆ สำหรับ SDK ของ HTML5 คุณ ต้องเพิ่ม JavaScript บางส่วนลงในหน้า HTML และประกาศช่องโฆษณาที่แสดงร่วม

ตัวอย่างที่ 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: ช่องโฆษณาที่โหลดล่วงหน้า

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

ตัวอย่างการติดตั้งใช้งานที่อธิบายไว้ข้างต้นมีดังนี้

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

ลองเลย

คุณดูการติดตั้งใช้งานที่ใช้งานได้ได้ใน CodePen ต่อไปนี้

ใช้โฆษณาที่แสดงร่วมกับ Ad API

ส่วนนี้อธิบายวิธีแสดงโฆษณาที่แสดงร่วมโดยใช้ Ad API

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

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

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

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

  1. สร้างช่องโฆษณาที่แสดงร่วม<div>ที่มีขนาดที่ต้องการในหน้าเว็บ
  2. ในเครื่องจัดการเหตุการณ์สำหรับเหตุการณ์ STARTED ให้เรียกออบเจ็กต์ Ad โดยเรียกใช้ getAd()
  3. ใช้ getCompanionAds() เพื่อรับรายการโฆษณาที่แสดงร่วมที่ตรงกับทั้งขนาดช่องโฆษณาที่แสดงร่วมและ CompanionAdSelectionSettings และมีหมายเลขลำดับเดียวกันกับครีเอทีฟโฆษณาหลัก ครีเอทีฟโฆษณาที่ไม่มีแอตทริบิวต์ลำดับ จะถือว่ามีหมายเลขลำดับเป็น 0
  4. รับเนื้อหาจากอินสแตนซ์ 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>

แสดงโฆษณา Display ที่แสดงร่วมแบบยืดหยุ่น

ตอนนี้ IMA รองรับโฆษณาที่แสดงร่วมแบบไหลแล้ว โฆษณาประกอบเหล่านี้สามารถปรับขนาด ให้ตรงกับขนาดของช่องโฆษณาได้ โดยจะเติมความกว้างของ Div หลัก 100% จากนั้นจะปรับขนาดความสูงให้พอดีกับเนื้อหาของโฆษณาที่แสดงร่วม โดยตั้งค่าโดยใช้Fluidขนาดโฆษณาที่แสดงร่วมใน Ad Manager ดูตำแหน่งที่ตั้งค่านี้ได้ในรูปภาพต่อไปนี้

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

โฆษณาแสดงร่วมแบบยืดหยุ่นของ GPT

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

โฆษณา 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>