Aturan iklan

IMA HTML5 SDK mendukung playlist iklan yang sepenuhnya otomatis. Fitur ini menyisipkan jeda iklan ke dalam konten seperti yang ditentukan dalam Google Ad Manager saat memproses iklan. Hal ini juga sangat menyederhanakan kode pemutar video untuk mendukung jeda iklan, termasuk pre-roll, mid-roll, dan post-roll.

  • Saat membuat AdsManager, contentPlayback objek diteruskan melalui getAdsManager panggilan telepon. Objek ini harus memiliki properti currentTime yang menampilkan titik pemutaran saat ini posisi video. Jika Anda menggunakan elemen video HTML5 untuk menampilkan konten, Anda dapat meneruskan elemen tersebut ke SDK. Objek ini digunakan untuk melacak progres pemutaran konten sehingga jeda iklan tersisip secara otomatis pada waktu yang ditentukan di Ad Manager. Anda juga harus mengizinkan SDK tahu bahwa Anda ingin menangani status konten atas nama Anda.
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
    adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
    adsManager = adsManagerLoadedEvent.getAdsManager(
        videoContent, adsRenderingSettings); // See API reference for
        
        contentPlayback.
    
  • Untuk memastikan post-roll diputar, Anda harus memberi tahu SDK saat konten Anda tidak selesai. Ini agak rumit, karena dalam beberapa kasus, SDK menggunakan video Anda pemutar video untuk memutar iklan. Jadi, pastikan Anda hanya memberi tahu SDK konten Anda jadi selesai, bukan saat iklan selesai. Anda dapat melakukannya dengan menggunakan kode di bawah ini:
    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 dan CONTENT_RESUME_REQUESTED peristiwa digunakan untuk menjeda dan melanjutkan konten saat jeda iklan diputar.
  • Jika pemutar video Anda mendukung tarik-untuk-mencari, dan properti waktu saat ini dari pemutar video diperbarui saat pengguna menyeret, SDK tidak bisa membedakan antara konten yang berkembang secara normal dan pengguna yang mencari melalui konten. Anda harus menggunakan objek contentPlayback kustom sebagai parameter untuk getAdsManager. Untuk mengetahui contoh kasus penggunaan ini, lihat Masalah terkait Mencari.

Catatan: Saat konten telah selesai diputar atau pengguna telah menghentikan pemutaran, pastikan untuk memanggil AdsLoader.contentComplete untuk memberi tahu SDK bahwa konten sudah selesai. SDK kemudian memutar jeda iklan post-roll, jika sudah dijadwalkan. ALL_ADS_COMPLETED dipicu saat SEMUA jeda iklan telah diputar. Selain itu, perhatikan pelacakan konten dimulai ketika init() dipanggil dan Anda harus selalu panggil init() sebelum memutar konten.

Menonaktifkan pemutaran otomatis jeda iklan

Dalam beberapa situasi, Anda mungkin ingin mencegah SDK memutar jeda iklan hingga Anda siap untuk mereka. Dalam skenario ini, Anda dapat menonaktifkan pemutaran otomatis jeda iklan dan memberi tahu SDK kapan Anda siap memutar jeda iklan. Dengan ini Setelah memuat jeda iklan, SDK mengaktifkan Peristiwa AD_BREAK_READY. Saat pemutar Anda siap memulai jeda iklan, Anda dapat memanggil 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();
}

Cobalah

Anda dapat melihat implementasi yang berfungsi di bawah.

Masalah dalam mencari

Jika menggunakan aturan iklan, Anda mungkin akan mengalami masalah dengan pencarian klik dan tarik. Khususnya, setelah pengguna mengklik dan menarik untuk mencari video yang melewati beberapa pod mid-roll, pod mungkin melihat 2 pod atau lebih yang diputar secara beruntun sebelum konten dapat dilanjutkan. Hal ini disebabkan oleh waktu pemutaran video yang diperbarui saat dicari pengguna; jika SDK melakukan polling untuk waktu saat ini saat pengguna mencari melewati iklan, sistem mungkin berpikir bahwa iklan tersebut harus diputar. Kapan konten melanjutkan, iklan akan diputar, lalu iklan terbaru sejak pencarian. Untuk representasi visual masalah ini, lihat diagram di bawah ini:

Cara sederhana untuk menyelesaikan masalah ini adalah menghemat waktu saat ini ketika pengguna mulai mencari, dan melaporkan waktu tersebut saat SDK memintanya hingga pengguna melanjutkan pemutaran normal. Untuk representasi visual dari solusi ini, lihat diagram di bawah ini:

Dengan solusi ini, Anda harus melewati mid-roll 0:10 dan hanya memutar mid-roll 0:20. Hal ini dilakukan menggunakan pelacak playhead kustom, seperti yang ditunjukkan di bawah. Kode di bawah ini berisi modifikasi (ditampilkan dalam cetak tebal) ads.js dalam HTML5 lanjutan yang tersedia di halaman download.

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

Masalah umum pada Safari seluler

Metode ini dapat berfungsi di setiap platform kecuali Safari seluler. Di perangkat seluler Safari, properti pencarian tag video tidak diterapkan dengan benar ( selalu menghasilkan nilai salah). Untuk menghindarinya, Anda perlu melakukan pemeriksaan melihat apakah pengguna mencari melalui video itu. Kode contoh untuk metode ini mengikuti. Sekali lagi, baris tebal di bawah ini adalah modifikasi untuk kode yang sudah ada.

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

Dengan perubahan ini, SDK kini menggunakan properti currentTime dari Ads objek untuk menentukan kapan harus memutar jeda iklan, bukan properti currentTime pemutar video konten.