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. Công cụ này cũng đơ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 cả quảng cáo trước video, trong video và sau video.

  • Khi tạo AdsManager, contentPlayback được chuyển vào thông qua getAdsManager . Đối tượng này phải có một thuộc tính currentTime trả về con trỏ vị trí hiện tại của video. Nếu bạn đang sử dụng phần tử video HTML5 để hiển thị nội dung của mình, bạn chỉ cần chuyển phần tử đó đến SDK. Đối tượng này được dùng để theo dõi tiến trình phát nội dung, vì vậy, điểm chèn quảng cáo tự động được chèn vào các thời điểm được chỉ định trong Ad Manager. Bạn cũng cần cho phép SDK biết rằng bạn muốn SDK đó 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 phát quảng cáo sau video, bạn cần cho SDK biết thời điểm nội dung của mình đã hoàn tất. Việc này hơi phức tạp vì trong một số trường hợp, SDK sử dụng video của bạn trình phát để phát quảng cáo, vì vậy, bạn cần đảm bảo chỉ cho SDK biết khi nội dung của bạn đã kết thúc chứ không phải khi quảng cáo kết thúc. Bạn có thể làm điều đó bằng cách sử dụng mã bên dưới:
    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_REQUESTEDCONTENT_RESUME_REQUESTED các sự kiện được dùng để tạm dừng và tiếp tục 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ợ 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 đang kéo, SDK không thể phân biệt giữa nội dung tiến triển bình thường và người dùng tìm kiếm thông qua nội dung. Bạn phải sử dụng đối tượng contentPlayback tuỳ chỉnh làm tham số để getAdsManager. Để xem ví dụ về trường hợp sử dụng này, hãy xem bài viết Vấn đề 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 AdsLoader.contentComplete để báo cho SDK biết rằng nội dung đã hoàn tất. Sau đó, SDK này sẽ phát điểm chèn quảng cáo sau video nếu đã được lên lịch. ALL_ADS_COMPLETED sự kiện tăng lên khi TẤT CẢ điểm chèn quảng cáo được phát. Ngoài ra, hãy lưu ý quá trình theo dõi nội dung bắt đầu khi init() được gọi và bạn nên 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 có thể muốn ngăn SDK phát điểm chèn quảng cáo cho đến khi bạn đã sẵn sàng cho chú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 ưu tiên cho SDK biết khi nào bạn đã sẵn sàng phát điểm chèn quảng cáo. Bằng cách này thì sau khi SDK tải một điểm chèn quảng cáo, SDK đó sẽ kích hoạt một Sự kiện AD_BREAK_READY. Khi trình phát của bạn đã sẵn sàng cho đ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 hiệu quả ở bên dưới.

Khó khăn khi tua

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

Cách đơn giản để giải quyết vấn đề này là lưu 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 SDK yêu cầu cho đến khi người dùng sẽ tiếp tục phát bình thường. Để có bản trình bày trực quan về giải pháp này, hãy xem sơ đồ dưới đây:

Với giải pháp này, bạn bỏ qua đúng quảng cáo 0:10 giữa video và chỉ phát quảng cáo giữa video 0:20. Bạn có thể thực hiện việc này bằng cách sử dụng 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 nội dung sửa đổi (hiển thị đậm) của ads.js trong HTML5 nâng cao mẫu có sẵn trên trang tải xuống.

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

Sự cố đã biết với Safari dành cho 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 thiết bị di động Safari, 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ề false). Để giải quyết vấn đề đó, bạn cần tự kiểm tra để xem liệu người dùng có đang tìm kiếm xuyên qua video hay không. Mã mẫu cho phương thức này theo dõi. Xin nhắc lại, các dòng in đậm bên dưới là nội dung sửa đổ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 Ads để xác định thời điểm phát điểm chèn quảng cáo, không phải là thuộc tính currentTime của trình phát video nội dung.