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 Anda. Tindakan ini juga sangat menyederhanakan kode pemutar video yang diperlukan untuk mendukung jeda iklan, termasuk pre-roll, mid-roll, dan post-roll.
- Saat membuat
AdsManager
, objekcontentPlayback
akan diteruskan melalui panggilan getAdsManager. Objek ini harus memiliki properticurrentTime
yang menampilkan posisi titik pemutaran video saat ini. Jika menggunakan elemenvideo
HTML5 untuk menampilkan konten, Anda cukup meneruskan elemen tersebut ke SDK. Objek ini digunakan untuk melacak progres pemutaran konten sehingga jeda iklan otomatis disisipkan pada waktu yang ditentukan dalam Ad Manager. Anda juga perlu memberi tahu SDK bahwa Anda ingin SDK 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
selesai. Hal ini sedikit rumit, karena dalam beberapa kasus SDK menggunakan pemutar video
Anda untuk memutar iklan, jadi Anda perlu memastikan bahwa Anda hanya memberi tahu SDK saat
konten Anda selesai, dan bukan saat iklan selesai. Anda dapat melakukannya 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); ... }
- Peristiwa
CONTENT_PAUSE_REQUESTED
danCONTENT_RESUME_REQUESTED
digunakan untuk menjeda dan melanjutkan konten saat jeda iklan diputar. - Jika pemutar video Anda mendukung fitur tarik untuk mencari, dan properti waktu saat ini dari pemutar video diperbarui saat pengguna menarik, SDK tidak dapat membedakan antara konten yang berlangsung secara normal dan pengguna yang melakukan pencarian konten.
Anda harus menggunakan objek contentPlayback kustom sebagai parameter untuk
getAdsManager
. Untuk contoh kasus penggunaan ini, lihat Masalah terkait Pencarian.
Catatan: Setelah konten selesai diputar atau
pengguna telah menghentikan pemutaran, pastikan untuk memanggil AdsLoader.contentComplete
untuk memberi tahu SDK bahwa konten telah selesai. SDK kemudian memutar
jeda iklan post-roll, jika ada yang telah dijadwalkan. Peristiwa ALL_ADS_COMPLETED
muncul saat SEMUA jeda iklan telah diputar. Selain itu, perhatikan
bahwa pelacakan konten dimulai saat init()
dipanggil dan Anda harus
selalu memanggil init()
sebelum memutar konten.
Menonaktifkan pemutaran otomatis jeda iklan
Dalam beberapa situasi, Anda mungkin ingin mencegah SDK memutar jeda iklan sampai
Anda siap melakukannya. Dalam skenario ini, Anda dapat menonaktifkan pemutaran otomatis jeda iklan
untuk memberi tahu SDK kapan jeda iklan siap diputar. Dengan konfigurasi ini, setelah memuat jeda iklan, SDK akan mengaktifkan peristiwa AD_BREAK_READY
. Saat pemutar 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 mengalami masalah dengan pencarian klik dan tarik. Secara khusus, setelah pengguna mengklik dan menarik untuk mencari melalui video melewati beberapa pod mid-roll, mereka mungkin melihat 2 atau lebih pod tersebut diputar secara berturut-turut sebelum konten dilanjutkan. Hal ini disebabkan oleh waktu titik pemutaran video yang diperbarui saat pengguna melakukan pencarian; jika SDK kebetulan melakukan polling untuk waktu saat ini ketika pengguna mencari melewati iklan, SDK mungkin berpikir bahwa iklan tersebut harus diputar. Saat konten dilanjutkan, konten akan memutar iklan tersebut, lalu iklan terbaru sejak pencarian. Untuk representasi visual masalah ini, lihat diagram di bawah ini:
Cara sederhana untuk mengatasi hal 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 solusi ini, lihat diagram di bawah:
Dengan solusi ini, Anda dapat melewati mid-roll 0:10 dengan benar dan hanya memutar mid-roll 0:20.
Hal ini dilakukan dengan menggunakan pelacak titik pemutaran khusus, seperti yang ditunjukkan di bawah ini. Kode di bawah ini
berisi modifikasi (ditampilkan dalam cetak tebal) ads.js
dalam contoh HTML5
lanjutan yang tersedia di
halaman download kami.
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 Safari seluler, properti pencarian tag video tidak diterapkan dengan benar (selalu menampilkan false). Untuk menyiasati itu, Anda perlu melakukan pemeriksaan sendiri untuk mengetahui apakah pengguna mencari sepanjang video. Berikut adalah kode contoh untuk metode ini. Sekali lagi, baris yang dicetak tebal di bawah ini merupakan modifikasi pada kode yang 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 sekarang menggunakan properti currentTime objek Ads
Anda untuk menentukan kapan harus memutar jeda iklan, bukan properti currentTime
pemutar video konten.