กฎของโฆษณา

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

  • เมื่อสร้าง AdsManager contentPlayback มีการส่งผ่าน getAdsManager การโทร ออบเจ็กต์นี้ต้อง มีพร็อพเพอร์ตี้ currentTime ที่แสดงส่วนหัวของตัวควบคุมการเล่นปัจจุบัน ตำแหน่งของวิดีโอ หากคุณใช้องค์ประกอบ HTML5 video เพื่อ แสดงเนื้อหาของคุณ ก็แค่ส่งผ่านองค์ประกอบนั้นไปยัง SDK วัตถุนี้ ใช้เพื่อติดตามความคืบหน้าในการเล่นเนื้อหา เพื่อให้ช่วงพักโฆษณา ระบบจะแทรกโดยอัตโนมัติตามเวลาที่ระบุใน Ad Manager นอกจากนี้ คุณยังต้องอนุญาตให้ SDK รู้ว่าคุณต้องการจัดการสถานะเนื้อหาในนามของคุณ
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings
    .restoreCustomPlaybackStateOnAdBreakComplete = true;
    adsManager
    = adsManagerLoadedEvent.getAdsManager(
        videoContent
    , adsRenderingSettings); // See API reference for
       

        contentPlayback
    .
  • คุณต้องแจ้งให้ SDK ทราบเมื่อเนื้อหาของคุณเล่นตอนท้ายอยู่เสมอ เสร็จสิ้นแล้ว ซึ่งจะค่อนข้างซับซ้อน เนื่องจากในบางกรณี SDK จะใช้วิดีโอของคุณ เพลเยอร์เพื่อเล่นโฆษณา ดังนั้นคุณต้องแน่ใจว่าคุณกำลังแจ้งให้ SDK ทราบเฉพาะเวลาที่ เนื้อหาของคุณสิ้นสุด ไม่ใช่เมื่อโฆษณาจบ คุณสามารถทำได้โดยใช้ ด้านล่างนี้
    var videoContent = document.getElementById('contentElement');
    var contentEndedListener = function() {adsLoader.contentComplete();};

    videoContent
    .addEventListener('ended', contentEndedListener);

    function onContentPauseRequested() {
      contentElement
    .removeEventListener('ended', contentEndedListener);
     
    ...
    }

    function onContentResumeRequested() {
      contentElement
    .addEventListener('ended', contentEndedListener);
     
    ...
    }
  • CONTENT_PAUSE_REQUESTED และ CONTENT_RESUME_REQUESTED ระบบจะใช้เหตุการณ์เพื่อหยุดเล่นเนื้อหาชั่วคราวและเล่นต่อเมื่อมีการเล่นช่วงพักโฆษณา
  • หากโปรแกรมเล่นวิดีโอของคุณรองรับการลากเพื่อค้นหา และพร็อพเพอร์ตี้เวลาปัจจุบัน วิดีโอเพลเยอร์อัปเดตขณะที่ผู้ใช้ลาก SDK จะไม่สามารถแยกความแตกต่าง ระหว่างเนื้อหาที่มีความคืบหน้าตามปกติและผู้ใช้ที่กำลังค้นหาผ่านเนื้อหานั้น คุณต้องใช้ออบเจ็กต์ contentPlayback ที่กำหนดเองเป็นพารามิเตอร์สำหรับ getAdsManager ดูตัวอย่างกรณีการใช้งานนี้ได้ที่ปัญหาการค้นหา

หมายเหตุ: เมื่อเนื้อหาเล่นเสร็จแล้ว หรือ ผู้ใช้หยุดเล่นแล้ว โปรดแน่ใจว่าได้เรียก AdsLoader.contentComplete เพื่อส่งสัญญาณให้ SDK ทราบว่าเนื้อหาเสร็จแล้ว จากนั้น SDK จะเล่น ช่วงพักโฆษณาตอนท้ายหากมีการกำหนดเวลาไว้ ALL_ADS_COMPLETED เหตุการณ์จะปรากฏขึ้นเมื่อมีการเล่นช่วงพักโฆษณาทั้งหมด นอกจากนี้ โปรดทราบว่า การติดตามเนื้อหานั้นจะเริ่มต้นเมื่อมีการเรียก init() และคุณควร โทรหา init() ก่อนเปิดเนื้อหาเสมอ

การปิดใช้การเล่นช่วงพักโฆษณาอัตโนมัติ

ในบางกรณี คุณอาจต้องป้องกันไม่ให้ SDK เล่นช่วงพักโฆษณาจนกว่า คุณก็พร้อมสำหรับพวกเขา ในกรณีนี้ คุณจะสามารถปิดใช้การเล่นอัตโนมัติของช่วงพักโฆษณา เพื่อให้ SDK ทราบว่าคุณพร้อมเล่นช่วงพักโฆษณาเมื่อใด ด้วยสิ่งนี้ เมื่อ SDK โหลดช่วงพักโฆษณาแล้ว SDK จะเริ่มทำงาน AD_BREAK_READY เหตุการณ์ เมื่อโปรแกรมเล่นพร้อมให้ช่วงพักโฆษณาเริ่มขึ้น คุณสามารถเรียก adsManager.start():

function requestAds() {}
 
...
 
adsLoader.getSettings().setAutoPlayAdBreaks(false);
 
...
}

function onAdsManagerLoaded() {
 
...
 
// For non-auto ad breaks, listen for ad break ready
  adsManager
.addEventListener(
      google
.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler
);

 
...
}

function adBreakReadyHandler() {
 
// Once we're ready to play ads. To skip this ad break, simply return
 
// from this handler without calling adsManager.start().
  adsManager
.start();
}

ลองเลย

ดูการใช้งานจริงได้ที่ด้านล่าง

ปัญหาเกี่ยวกับการกรอวิดีโอ

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

วิธีง่ายๆ ในการแก้ปัญหานี้คือ "ประหยัดเวลาปัจจุบันเมื่อผู้ใช้เริ่มต้น" และรายงานช่วงเวลาดังกล่าวเมื่อ SDK ขอข้อมูลจนกว่าผู้ใช้ กลับมาเล่นตามปกติ หากต้องการดูภาพนำเสนอของโซลูชันนี้ โปรดดูที่ แผนภาพด้านล่าง

เมื่อใช้โซลูชันนี้ คุณจะข้ามโฆษณาตอนกลาง 0:10 ได้อย่างเหมาะสม และเล่นเฉพาะโฆษณาตอนกลาง 0:20 เท่านั้น โดยใช้เครื่องมือติดตามส่วนหัวของตัวควบคุมการเล่นที่กำหนดเองดังที่แสดงด้านล่าง โค้ดด้านล่าง มีการปรับเปลี่ยน (แสดงเป็นตัวหนา) ของ ads.js ใน HTML5 ขั้นสูง ตัวอย่างที่มีอยู่ใน หน้าดาวน์โหลด

var Ads = function(application, videoPlayer) {
 
...
 
this.currentTime = 0;
  setInterval
(this.updateCurrentTime, 1000);

};

Ads.prototype.updateCurrentTime = function() {
 
if (!this.videoPlayer_.contentPlayer.seeking) {
   
this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
 
}
};


Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
 
this.application_.log('Ads loaded.');
 
this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
 
this.processAdsManager_(this.adsManager_);
};

ปัญหาที่ทราบเกี่ยวกับ Safari บนอุปกรณ์เคลื่อนที่

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

var Ads = function(application, videoPlayer) {
 
...
 
this.currentTime = 0;
  setInterval
(this.updateCurrentTime, 1000);
 
this.seeking = false;
 
this.seekCheckInterval = 1000;
 
// You may need to adjust this value, depending on your platform
 
this.seekThreshold = 100;
 
this.previousTime = 0;
  setInterval
(
     
Application.bind(this, this.checkForSeeking),
     
this.seekCheckInterval);

};

Ads.prototype.updateCurrentTime = function() {
 
if (!this.seeking) {
   
this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
 
}
};

Ads.prototype.checkForSeeking = function() {
 
var currentTime = this.videoPlayer_.contentPlayer.currentTime;
 
// How much time has passed since you last ran this method, in milliseconds
 
var diff = (currentTime - this.previousTime) * 1000;
 
// If that difference is greater than the time since you last ran this method,
 
// plus the threshold, the user was seeking
 
if (Math.abs(diff)  > this.interval + this.threshold) {
   
this.seeking = true;
 
} else {
   
this.seeking = false;
 
}
 
// Grab the current video time again to make up for time spent in this method
  previousTime
= this.videoPlayer_.contentPlayer.currentTime;
};


Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
 
this.application_.log('Ads loaded.');
 
this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
 
this.processAdsManager_(this.adsManager_);
};

การเปลี่ยนแปลงเหล่านี้ทําให้ SDK ใช้พร็อพเพอร์ตี้ปัจจุบันของ Ads อยู่ในขณะนี้ เพื่อระบุว่าเมื่อใดจะเล่นช่วงพักโฆษณา ไม่ใช่พร็อพเพอร์ตี้ currentTime ของ โปรแกรมเล่นวิดีโอเนื้อหา