ทำงานอัตโนมัติกับเพลย์ลิสต์โฆษณา

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

• เมื่อสร้าง AdsManager ระบบจะส่งออบเจ็กต์ contentPlayback ผ่านคําเรียก getAdsManager ออบเจ็กต์นี้ต้องมีพร็อพเพอร์ตี้ currentTime ที่แสดงผลตําแหน่งเพลย์เฮดปัจจุบันของวิดีโอ หากคุณใช้องค์ประกอบ video ของ HTML5 เพื่อแสดงเนื้อหา ก็เพียงส่งองค์ประกอบนั้นไปยัง 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 จะเรียกเหตุการณ์ 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 อาจคิดว่าควรเล่นโฆษณา เมื่อเนื้อหาเล่นต่อ ระบบจะเล่นโฆษณานั้น แล้วเล่นโฆษณาล่าสุดนับตั้งแต่การกรอ ดูภาพประกอบของปัญหานี้ได้ในแผนภาพต่อไปนี้

บันทึกเวลาปัจจุบันเมื่อผู้ใช้เริ่มกรอ และรายงานเวลาดังกล่าวเมื่อ 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 ใช้พร็อพเพอร์ตี้ currentTime ของออบเจ็กต์ Ads เพื่อระบุเวลาเล่นช่วงพักโฆษณา ไม่ใช่พร็อพเพอร์ตี้ currentTime ของวิดีโอเพลเยอร์เนื้อหา