Panduan ini menunjukkan cara menggunakan IMA HTML5 SDK untuk menempatkan pemutar video
dengan gambar poster saat iklan audio diputar. Elemen ini harus digunakan jika ad_type=audio_video
ditetapkan dalam permintaan URL VAST Anda. Tindakan ini memungkinkan
peningkatan monetisasi iklan karena iklan audio dan video memenuhi syarat dan lengkap
untuk ditayangkan. Lihat dokumentasi
ad_type
dan Audio dalam konten
video
untuk detail selengkapnya.
Anda dapat mengikuti panduan ini, melakukan perubahan pada integrasi IMA dasar, atau melihat audio dalam aplikasi contoh video untuk integrasi penuh dengan fitur ini.
Prasyarat
- Aplikasi yang menerapkan IMA HTML5 SDK untuk iklan video. Lihat panduan memulai IMA HTML5 untuk informasi selengkapnya.
- Gambar poster default yang menempatkan pemutar video saat iklan audio ditayangkan tanpa gambar overlay yang relevan. Agar gambar pas dalam pemutar video, lebarnya harus kurang dari atau sama dengan lebar pemutar video dan tingginya minimal harus 75 piksel lebih kecil dari lebar pemutar video.
Mengaktifkan fitur gambar poster
Sebelum membuat permintaan iklan audio dan video, setel tombol fitur audioPosterImageEnabled
ke true
dan tombol fitur audioPosterImageDefaultUrl
ke
URL gambar poster default Anda. Lakukan hal ini dengan
ImaSdkSettings.setFeatureFlags()
API sebelum membuat AdDisplayContainer
. Saat elemen ini disetel dan iklan audio
diputar, IMA otomatis menempatkan gambar yang terkait dengan iklan di atas
pemutar video. IMA memilih gambar iklan pengiring terbesar yang tersedia yang sesuai
dengan pemutar video dan setidaknya 75 px lebih pendek dari pemutar video.
Jika VAST iklan tidak menyertakan gambar yang dapat digunakan IMA sebagai overlay, IMA
akan menggunakan gambar default yang Anda tentukan sebagai overlay.
function initializeIMA() {
console.log('initializing IMA');
adContainer = document.getElementById('ad-container');
google.ima.settings.setFeatureFlags(
{
'audioPosterImageEnabled': true,
'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
});
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
adsLoader = new google.ima.AdsLoader(adDisplayContainer);
// Let the AdsLoader know when the video has ended
videoElement.addEventListener('ended', function() {
adsLoader.contentComplete();
});
var adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
...
// Pass the request to the adsLoader to request ads
adsLoader.requestAds(adsRequest);
}