กฎของโฆษณา

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

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

วิธีแก้ปัญหานี้ช่วยให้คุณข้ามโฆษณาตอนกลางขนาด 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 ของโปรแกรมเล่นวิดีโอเนื้อหา