Gambar poster iklan audio

Panduan ini menunjukkan cara menggunakan IMA HTML5 SDK untuk menempatkan video Anda pemutar dengan gambar poster saat iklan audio diputar. Ini harus digunakan saat ad_type=audio_video ditetapkan dalam permintaan URL VAST Anda. Hal ini memungkinkan peningkatan monetisasi iklan karena iklan audio dan video memenuhi syarat dan lengkap yang akan ditayangkan. Lihat ad_type dokumentasi dan Audio dalam video konten untuk mengetahui detail selengkapnya.

Anda dapat mengikuti panduan ini, melakukan perubahan pada IMA dasar integrasi situs, atau melihat aplikasi contoh audio dalam video untuk integrasi penuh dengan fitur ini.

Prasyarat

• Aplikasi yang menerapkan IMA HTML5 SDK untuk iklan video. Lihat HTML5 IMA panduan memulai untuk informasi selengkapnya.
• Gambar poster default yang menempatkan pemutar video sebagai overlay saat iklan audio yang ditayangkan tanpa gambar overlay yang relevan. Agar gambar sesuai dengan lebar pemutar video, harus kurang dari atau sama dengan lebar video pemutar dan tingginya setidaknya harus 75 piksel lebih kecil dari video web.

Mengaktifkan fitur gambar poster

Sebelum membuat permintaan iklan audio dan video, setel audioPosterImageEnabled tombol fitur ke true dan tombol fitur audioPosterImageDefaultUrl untuk URL gambar poster default Anda. Lakukan hal ini dengan ImaSdkSettings.setFeatureFlags() API sebelum membuat AdDisplayContainer. Jika hal ini ditetapkan dan iklan audio sedang diputar, IMA otomatis menempatkan gambar yang terkait dengan iklan di bagian atas pemutar video. IMA memilih gambar iklan pengiring terbesar yang sesuai dan tersedia dalam pemutar video dan setidaknya 75 piksel lebih pendek dari pemutar video. Jika VAST iklan tidak menyertakan gambar yang dapat digunakan IMA sebagai overlay, maka IMA menggunakan gambar default yang Anda tetapkan 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);
}