Quy tắc quảng cáo

SDK IMA HTML5 hỗ trợ danh sách phát quảng cáo hoàn toàn tự động. Tính năng này chèn điểm chèn quảng cáo vào nội dung như chỉ định trong Google Ad Manager khi quản lý quảng cáo. Điều này cũng giúp đơn giản hoá đáng kể mã trình phát video cần thiết để hỗ trợ các điểm chèn quảng cáo, bao gồm quảng cáo trước video, trong video và sau video.

  • Khi tạo AdsManager, đối tượng contentPlayback sẽ được truyền vào thông qua lệnh gọi getAdsManager. Đối tượng này phải có một thuộc tính currentTime trả về vị trí con phát hiện tại của video. Nếu đang sử dụng phần tử video HTML5 để hiển thị nội dung, bạn có thể chỉ cần chuyển phần tử đó đến SDK. Đối tượng này dùng để theo dõi tiến trình phát nội dung, và hệ thống sẽ tự động chèn điểm chèn quảng cáo vào những thời điểm được chỉ định trong Ad Manager. Bạn cũng cần cho SDK biết rằng bạn muốn SDK này thay mặt bạn xử lý trạng thái nội dung. 
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for
    
    contentPlayback.
  • Để đảm bảo quảng cáo sau video sẽ phát, bạn cần cho SDK biết khi nào nội dung của bạn hoàn tất. Điều này hơi phức tạp, vì trong một số trường hợp, SDK sử dụng trình phát video của bạn để phát quảng cáo, vì vậy, bạn cần đảm bảo chỉ cho SDK biết thời điểm nội dung của bạn hoàn tất chứ không phải khi quảng cáo kết thúc. Bạn có thể thực hiện việc đó bằng cách sử dụng mã dưới đây: 
    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);
  ...
}
  • Các sự kiện CONTENT_PAUSE_REQUESTED và CONTENT_RESUME_REQUESTED được dùng để tạm dừng và tiếp tục phát nội dung khi các điểm chèn quảng cáo được phát.
  • Nếu trình phát video của bạn hỗ trợ tính năng kéo để tìm và thuộc tính thời gian hiện tại của trình phát video cập nhật trong khi người dùng kéo, thì SDK không thể phân biệt giữa nội dung đang diễn ra bình thường và người dùng đang tìm kiếm nội dung. Bạn phải sử dụng đối tượng contentPlayback tuỳ chỉnh làm thông số cho getAdsManager. Để biết ví dụ về trường hợp sử dụng này, hãy xem Sự cố khi tìm kiếm.

Lưu ý: Khi nội dung phát xong hoặc người dùng đã dừng phát, hãy nhớ gọi hàm AdsLoader.contentComplete để báo hiệu cho SDK rằng nội dung đã hoàn tất. Sau đó, SDK sẽ phát điểm chèn quảng cáo sau video nếu đã lên lịch chèn quảng cáo. Sự kiện ALL_ADS_COMPLETED sẽ tăng lên khi chế độ TẤT CẢ điểm chèn quảng cáo đã được phát. Ngoài ra, xin lưu ý rằng quá trình theo dõi nội dung bắt đầu khi init() được gọi và bạn phải luôn gọi init() trước khi phát nội dung.

Tắt tính năng tự động phát điểm chèn quảng cáo

Trong một số trường hợp, bạn nên ngăn SDK phát điểm chèn quảng cáo cho đến khi sẵn sàng. Trong trường hợp này, bạn có thể tắt tính năng tự động phát điểm chèn quảng cáo và cho SDK biết thời điểm bạn đã sẵn sàng phát điểm chèn quảng cáo. Với cấu hình này, sau khi tải một điểm chèn quảng cáo, SDK sẽ kích hoạt sự kiện AD_BREAK_READY. Khi trình phát đã sẵn sàng để điểm chèn quảng cáo bắt đầu, bạn có thể gọi 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();
}

Dùng thử

Bạn có thể xem cách triển khai đang hoạt động ở bên dưới.

Vấn đề khi tìm kiếm

Nếu bạn sử dụng các quy tắc quảng cáo, bạn có thể gặp vấn đề với việc tìm kiếm nhấp và kéo. Cụ thể, sau khi người dùng nhấp và kéo để tìm kiếm video qua nhiều nhóm quảng cáo giữa video, họ có thể thấy 2 hoặc nhiều nhóm trong số đó phát liên tiếp trước khi nội dung tiếp tục phát. Điều này là do thời gian phát video cập nhật trong khi người dùng đang tìm kiếm; nếu SDK thăm dò ý kiến trong thời gian hiện tại trong khi người dùng tìm kiếm qua một quảng cáo, thì SDK đó có thể cho rằng nên phát quảng cáo đó. Khi nội dung tiếp tục, nội dung sẽ phát quảng cáo đó, sau đó là quảng cáo gần đây nhất kể từ khi tìm kiếm. Để xem hình ảnh minh hoạ vấn đề này, hãy xem sơ đồ dưới đây:

Cách đơn giản để giải quyết vấn đề này là tiết kiệm thời gian hiện tại khi người dùng bắt đầu tìm kiếm và báo cáo thời điểm đó khi SDK yêu cầu cho đến khi người dùng tiếp tục phát bình thường. Để xem hình ảnh minh hoạ giải pháp này, hãy xem sơ đồ dưới đây:

Với giải pháp này, bạn sẽ bỏ qua quảng cáo giữa video 0:10 đúng cách và chỉ phát quảng cáo 0:20 giữa video. Bạn có thể thực hiện việc này bằng cách sử dụng một trình theo dõi con trỏ vị trí tuỳ chỉnh như minh hoạ dưới đây. Mã bên dưới chứa các nội dung sửa đổi (được in đậm) của ads.js trong mẫu HTML5 nâng cao có trên trang tải xuống của chúng tôi.

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_);
};

Vấn đề đã biết với Safari trên thiết bị di động

Phương thức này sẽ hoạt động trên mọi nền tảng, ngoại trừ Safari dành cho thiết bị di động. Trên Safari dành cho thiết bị di động, thuộc tính tìm kiếm của thẻ video không được triển khai đúng cách (luôn trả về giá trị false). Để giải quyết vấn đề đó, bạn cần tự kiểm tra xem người dùng có tìm kiếm thông qua video hay không. Dưới đây là mã mẫu cho phương thức này. Một lần nữa, các dòng in đậm bên dưới là nội dung sửa đổi đối với mã hiện có.

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_);
};

Với những thay đổi này, SDK hiện đang sử dụng thuộc tính currentTime của đối tượng Ads để xác định thời điểm phát điểm chèn quảng cáo, chứ không phải thuộc tính currentTime của trình phát video nội dung.