Gambar poster iklan audio

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