Iklan audio

IMA HTML5 SDK mendukung iklan audio dengan penyiapan yang serupa seperti iklan video tetapi dengan beberapa perbedaan utama. Untuk setiap bagian penyiapan IMA yang tidak tercakup dalam panduan ini, lihat dokumentasi HTML5 Get started panduan kami.

Penggunaan <audio> tag untuk pemutaran konten

Konstruktor untuk AdDisplayContainer menggunakan argumen kedua bernama videoElement yang dilacak IMA sebagai konten web. Argumen ini menerima tag <video> atau <audio>. Untuk audio konten 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 tetap memerlukan AdDisplayContainer meskipun tidak ada bagian tampilan ke iklan atau konten. Oleh karena itu, sebaiknya sembunyikan AdDisplayContainer. Berikut adalah contoh cara menyembunyikan elemen:

style.css

.ad-container {
  display: none;
}

Kontrol kustom

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

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 IMA berikut metode:

Kode contoh di bawah menunjukkan cara melakukannya.

ads.js

Anda dapat menyiapkan fungsi updateSkippable untuk menentukan apakah iklan akan ditampilkan atau tidak dapat dilewati. Fungsi ini harus dipanggil di setiap peristiwa IMA AD_PROGRESS. Lihat Panduan memulai untuk mendapatkan petunjuk cara menyiapkan pemroses untuk 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/js/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. AI generatif menggunakan '.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 adsManager.skip() .

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

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