Prośba o reklamy w treściach audio

Pakiet IMA HTML5 SDK obsługuje reklamy audio o podobnej konfiguracji jak reklamy wideo, ale z kilkoma kluczowymi różnicami. Jeśli w tym przewodniku nie znajdziesz informacji o jakimś etapie konfiguracji IMA, zapoznaj się z przewodnikiem dla początkujących dotyczącym HTML5.

używanie tagu <audio> do odtwarzania treści;

Konstruktor funkcji AdDisplayContainer przyjmuje drugi argument o nazwie videoElement, który IMA śledzi jako odtwarzacz treści. Ten argument akceptuje tag <video> lub <audio>. W przypadku treści audio i reklam ten przewodnik zaleca używanie tagu <audio> do tworzenia elementu AdDisplayContainer. Jeśli masz treści wideo, możesz użyć tagu <video> do wyświetlania reklam audio i 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 AdDisplayContainer

Pakiet IMA HTML5 SDK nadal wymaga parametru AdDisplayContainer, nawet jeśli reklamy lub treści nie mają części displayowej. Z tego powodu zalecamy ukrycie znaku AdDisplayContainer. Oto przykład, jak możesz ukryć element:

style.css

.ad-container {
  display: none;
}

Niestandardowe elementy sterujące

Ponieważ AdDisplayContainer jest ukryty, do obsługi odtwarzania podczas przerw reklamowych potrzebne są niestandardowe elementy sterujące. AdsManager ma metody, których można użyć do wdrożenia tych ustawień niestandardowych:

Obsługa reklam możliwych do pominięcia

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

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

ads.js

Możesz skonfigurować funkcję updateSkippable, aby określić, czy i kiedy można pominąć reklamę. Tę funkcję należy wywoływać przy każdym AD_PROGRESSwydarzeniu IMA. Więcej informacji o konfigurowaniu detektorów zdarzeń IMA znajdziesz w przewodniku dla początkujących.

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

W przeciwieństwie do reklam wideo, w przypadku reklam audio IMA nie może udostępnić przycisku pomijania. Deweloperzy muszą dodać niestandardowy interfejs do reklam możliwych do pominięcia. Można to zrobić za pomocą prostego tagu <button>. Ta funkcja updateSkipUI aktualizuje przycisk pomijania na podstawie tego, czy reklama jest możliwa do pominięcia, czy obecnie można ją pominąć oraz ile czasu pozostało do momentu, w którym będzie można ją pominąć. Korzysta z klasy '.hidden', która nie jest udostępniana przez IMA. Klasa .hidden dodaje do elementu <button> wartość display: none;.

/**
 * 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 ustaw odbiornik kliknięć użytkownika na niestandardowym przycisku pomijania. Aby pominąć reklamy, wywołaj funkcję adsManager.skip().

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

Oto główne zmiany, które należy wprowadzić, aby skonfigurować pakiet IMA SDK pod kątem reklam audio. Jeśli masz problemy z wdrażaniem, skontaktuj się z nami w Centrum pomocy Ad Managera.