เปิดใช้โฆษณา Display เชิงเส้น

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

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

หมายเหตุ: หากต้องการเข้าถึงดีมานด์โฆษณา Display เชิงเส้น คุณต้องตั้งค่าการตรวจจับเนื้อหา หากคุณไม่ได้ตั้งค่าการตรวจจับเนื้อหา พื้นที่โฆษณาของคุณจะไม่มีสิทธิ์

คู่มือนี้ครอบคลุมการตั้งค่าการตรวจจับเนื้อหาเพื่อเปิดใช้โฆษณา Display เชิงเส้น การเปลี่ยนวิดีโอเพลเยอร์ของเนื้อหา และการหยุดรวบรวมสัญญาณเนื้อหา

ตั้งค่าการตรวจจับเนื้อหา

หากต้องการเปิดใช้โฆษณา Display เชิงเส้นสำหรับคำขอโฆษณา ให้ทำดังนี้

ต้นทางเดียวกัน

หาก IMA SDK มีต้นทางเดียวกันกับโปรแกรมเล่นเนื้อหา ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้

• แนะนำ ส่งวิดีโอเพลเยอร์ไปยังการเรียก AdsManagerLoadedEvent.getAdsManager() แม้ว่า getAdsManager() จะอนุญาตให้คุณส่งออบเจ็กต์ที่มีพร็อพเพอร์ตี้ currentTime ได้ แต่คุณต้องส่งอินสแตนซ์ HTMLVideoElement ไปยัง getAdsManager() เพื่อรองรับการตรวจจับเนื้อหา

  function onAdsManagerLoaded(adsManagerLoadedEvent) {
    // Set any AdsRenderingSettings here.
    const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  
    // Get the ads manager.
    adsManager =
      adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
  }
  

• หากคุณไม่สามารถระบุโปรแกรมเล่นเนื้อหาในระหว่างการเรียก AdsManagerLoadedEvent.getAdsManager() ให้เรียกใช้เมธอด AdsManager.configureAdsManager() กับวิดีโอเพลเยอร์ การตรวจจับเนื้อหาจะทำงานได้ก็ต่อเมื่อเป็น HTMLVideoElement

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

หากคุณไม่ได้ตั้งค่าการตรวจจับเนื้อหา เซิร์ฟเวอร์โฆษณาของ Google อาจหยุดแสดงโฆษณา Display แบบเชิงเส้น

หากโปรแกรมเล่นเนื้อหาอยู่ในต้นทางเดียวกับที่คุณโหลด IMA SDK คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ กับการติดตั้งใช้งาน IMA เพื่อจัดการการเปลี่ยนแปลงโปรแกรมเล่นเนื้อหาหรือหยุดการรวบรวมสัญญาณเนื้อหา

ข้ามต้นทาง

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

หากคุณยังคงวางโปรแกรมเล่นเนื้อหาแบบข้ามต้นทางไปยัง IMA SDK โดยไม่ใช้คลาส CrossOriginProxy เซิร์ฟเวอร์โฆษณาของ Google อาจหยุดแสดงโฆษณา Display แบบเชิงเส้น

หากต้องการโหลดคลาส CrossOriginProxy ลงในแอป ให้ทำดังนี้

1. นำเข้าไฟล์ ima_proxy.js ในไฟล์ HTML โดยทำดังนี้

   <html>
     <head>
       <title>IMA HTML5 cross-origin iframe sample</title>
       <link rel="stylesheet" href="style.css">
     </head>
   
     <body>
       <div id="mainContainer">
         <div id="content">
           <video id="contentElement">
             <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
           </video>
         </div>
   
         <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
         <iframe id="adContainerIframe"
                 src="https://cross-origin-domain.com/ads-sandbox.html" >
         </iframe>
   
       </div>
       <button id="playButton">Play</button>
   
       <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
       <script src="main.js"></script>
     </body>
   </html>
   

2. ในไฟล์ main.js ให้รับอินสแตนซ์ CrossOriginProxy

3. เรียกใช้เมธอด setVideoElements() ด้วยอาร์เรย์ของวิดีโอเพลเยอร์ทั้งหมดที่แสดงโฆษณาในหน้าเว็บหรือแอปของคุณ

ก่อนส่งคำขอโฆษณา คุณต้องส่งองค์ประกอบวิดีโอไปยังอินสแตนซ์ CrossOriginProxy ด้วยการเรียก setVideoElements() ตัวอย่างต่อไปนี้ส่งอาร์เรย์ที่มีวิดีโอเพลเยอร์เนื้อหาเดียว

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

เปลี่ยนวิดีโอเพลเยอร์ของเนื้อหา

หากเปลี่ยนหรือเพิ่มวิดีโอเพลเยอร์เนื้อหาอื่น คุณต้องส่งอาร์เรย์ใหม่ไปยังเมธอด setVideoElements() เมื่อคุณเรียกใช้ setVideoElements() ใหม่ IMA จะเริ่มรวบรวมสัญญาณสำหรับโปรแกรมเล่นเนื้อหาใหม่ และหยุดรวบรวมสัญญาณสำหรับโปรแกรมเล่นเนื้อหาที่ส่งผ่านในการเรียกใช้ก่อนหน้า

ตัวอย่างต่อไปนี้จะส่งองค์ประกอบวิดีโอใหม่ไปยังคลาส CrossOriginProxy

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

หยุดรวบรวมสัญญาณเมื่อโฆษณาเล่นจบ

เมื่อเล่นโฆษณาเสร็จและเรียกใช้เมธอด AdsLoader.destroy() คุณต้องเรียกใช้เมธอด setVideoElements() ด้วยอาร์เรย์ที่ว่างเปล่าด้วย การเรียกใช้ setVideoElements() ด้วยอาร์เรย์ที่ว่างเปล่าจะยกเลิกการอ้างอิงถึงเพลเยอร์เนื้อหาที่ IMA มีอยู่และป้องกันปัญหาหน่วยความจำรั่วไหล