Reklamy audio

Pakiet IMA HTML5 SDK obsługuje reklamy audio o podobnej konfiguracji jak reklamy wideo, ale o kilka kluczowych różnic. W przypadku części konfiguracji IMA, które nie zostały omówione w tym przewodniku, zapoznaj się z artykułem Pierwsze kroki z HTML5 .

Użycie tagu <audio> tag do odtwarzania treści

Konstruktor dla AdDisplayContainer korzysta z drugiego argumentu o nazwie videoElement, który IMA śledzi jako treść . Ten argument akceptuje zarówno tag <video>, jak i <audio>. Do dźwięku treści i reklam, w tym przewodniku zalecamy używanie tagu <audio> do tworzenia AdDisplayContainer Jeśli masz treści wideo, możesz użyć tagu <video> do które wyświetlają zarówno reklamy audio, jak i reklamy wideo:

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

Ukrywanie kontenera AdDisplayContainer

Pakiet IMA HTML5 SDK nadal wymaga parametru AdDisplayContainer, nawet jeśli nie ma parametru do wyświetlania części reklam lub treści. Z tego powodu zalecamy ukrycie parametru AdDisplayContainer Oto przykład, jak możesz ukryć element:

style.css

.ad-container {
  display: none;
}

Ustawienia niestandardowe

Sekcja AdDisplayContainer jest ukryta, więc potrzebne są niestandardowe elementy sterujące, w trakcie przerw na reklamę. AdsManager zawiera metody, których można użyć do wdrożyć te niestandardowe ustawienia:

Obsługa reklam możliwych do pominięcia

Ponieważ nie widać elementu AdDisplayContainer, pakiet IMA SDK nie może wyświetlić parametru Przycisk Pomiń reklamę. Aby obsługiwać reklamy możliwe do pominięcia, zaimplementuj te reklamy IMA metody:

Poniższy przykładowy kod ilustruje, jak to zrobić.

ads.js

Możesz skonfigurować funkcję updateSkippable, by określić, czy i kiedy dana reklama można pominąć. Tę funkcję należy wywoływać przy każdym zdarzeniu IMA AD_PROGRESS. Zobacz Przewodnik dla początkujących , by dowiedzieć się, jak skonfigurować detektory zdarzeń 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);
  }

W przeciwieństwie do reklam wideo IMA nie ma w przypadku reklam audio przycisku pominięcia. Deweloperzy muszą dodać niestandardowy interfejs dla reklam możliwych do pominięcia. Można to zrobić za pomocą prosty tag <button>. Ta funkcja updateSkipUI aktualizuje przycisk pomijania na podstawie tego, czy reklamę można pominąć, czy aktualnie można ją pominąć oraz ile czasu pozostało do pominięcia reklamy. Wykorzystuje '.hidden' klasy, która nie jest udostępniana przez IMA. Zajęcia .hidden dodaje display: none; do: <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');
  }
}

Na koniec skonfiguruj detektor kliknięć niestandardowego przycisku pominięcia. Aby pominąć reklamy: Wywołaj funkcję adsManager.skip() .

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

To główne zmiany niezbędne do skonfigurowania pakietu IMA SDK z reklamami audio. Dla: rozwiązań problemów z implementacją, Forum techniczne pakietu IMA SDK.