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 properticurrentTime
yang menampilkan titik pemutaran saat ini posisi video. Jika Anda menggunakan elemenvideo
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
danCONTENT_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:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_issue.jpg?authuser=4&hl=id)
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:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_fix.jpg?authuser=4&hl=id)
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.