Iklan audio

IMA HTML5 SDK mendukung iklan audio dengan penyiapan yang serupa dengan iklan video, tetapi dengan beberapa perbedaan utama. Untuk bagian penyiapan IMA yang tidak tercakup dalam panduan ini, lihat Panduan memulai HTML5.

Penggunaan tag <audio> untuk pemutaran konten

Konstruktor untuk AdDisplayContainer mengambil argumen kedua bernama videoElement yang dilacak IMA sebagai pemutar konten. Argumen ini menerima tag <video> atau <audio>. Untuk konten audio dan iklan, panduan ini merekomendasikan penggunaan tag <audio> untuk membuat AdDisplayContainer. Jika memiliki konten video, Anda dapat menggunakan tag <video> untuk menampilkan campuran iklan audio dan video:

index.html

<audio id="audio-player"></audio>
<div class="ad-container"></div>

ads.js

audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);

Menyembunyikan AdDisplayContainer

IMA HTML5 SDK masih memerlukan AdDisplayContainer meskipun tidak ada bagian tampilan untuk iklan atau konten. Oleh karena itu, sebaiknya sembunyikan AdDisplayContainer. Lihat contoh cara menyembunyikan elemen:

style.css

.ad-container {
  display: none;
}

Kontrol kustom

Karena AdDisplayContainer disembunyikan, kontrol kustom diperlukan untuk menangani pemutaran selama jeda iklan. AdsManager memiliki metode yang dapat digunakan untuk menerapkan kontrol kustom ini:

Menangani iklan yang dapat dilewati

Karena tidak ada AdDisplayContainer yang terlihat, IMA SDK tidak dapat menampilkan tombol Lewati iklan. Untuk menangani iklan yang dapat dilewati, terapkan metode IMA berikut:

Contoh kode berikut menunjukkan cara melakukannya.

ads.js

Anda dapat menyiapkan fungsi updateSkippable untuk menentukan apakah dan kapan iklan dapat dilewati. Fungsi ini harus dipanggil pada setiap peristiwa IMA AD_PROGRESS. Lihat Panduan memulai untuk mengetahui petunjuk cara menyiapkan pemroses peristiwa IMA.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
    audioPlayer);

  ...

  adsManager.addEventListener(
    google.ima.AdEvent.Type.AD_PROGRESS,
    onAdEvent);

  ...

}

function onAdEvent(adEvent) {
  const ad = adEvent.getAd();
  if (ad) {
    currentAd = ad; // currentAd is defined outside of this functions scope.
  }
  switch (adEvent.type) {

    ...

    case google.ima.AdEvent.Type.AD_PROGRESS:
      // See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.AdProgressData
      const adProgressData = adEvent.getAdData();

      updateSkippable(
        adProgressData.currentTime,
        currentAd.getSkipTimeOffset()
      );
      break;
    ...

  }
}

/**
   * Called when there may be a change in the skippable state.
   * @param {number} currentTime The current time of the
   * currently playing ad.
   * @param {number} skipTimeOffset The number of seconds of playback
   * before the ad becomes skippable. -1 is returned for non skippable
   * ads or if this is unavailable.
   */
  updateSkippable(currentTime, skipTimeOffset) {
    const isAdSkippable = skipTimeOffset !== -1;
    const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
    const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
    updateSkipUI(
        isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
  }

Tidak seperti iklan video, IMA tidak dapat menyediakan tombol lewati untuk iklan audio. Developer harus menambahkan UI kustom untuk iklan yang dapat dilewati, yang dapat dilakukan dengan tag <button> sederhana. Fungsi updateSkipUI ini memperbarui tombol lewati berdasarkan apakah iklan dapat dilewati, apakah iklan saat ini dapat dilewati, dan berapa lama waktu yang tersisa hingga iklan dapat dilewati. Class ini menggunakan class '.hidden', yang tidak disediakan oleh IMA. Class .hidden menambahkan display: none; ke <button>.

/**
 * Updates the skip button UI.
 * @param {boolean} isAdSkippable if the current ad is a skippable ad.
 * @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
 * @param {number} timeTillSkipInSeconds time until the ad can be skipped in
 * seconds.
 */
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
  if (isAdSkippable) {
    skipButton.classList.remove('hidden');
    if (isSkipCurrentlyAllowed) {
      skipButton.textContent = 'Skip ad';
      skipButton.disabled = false;
    } else {
      skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
      skipButton.disabled = true;
    }
  } else {
    skipButton.classList.add('hidden');
  }
}

Terakhir, tetapkan pemroses untuk klik pengguna pada tombol lewati kustom Anda. Untuk melewati iklan, panggil fungsi adsManager.skip().

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

Berikut adalah perubahan utama yang diperlukan untuk menyiapkan IMA SDK dengan iklan audio. Untuk menemukan jawaban atas masalah penerapan, buka Forum Teknis IMA SDK.