Audio-Anzeigen

Das IMA HTML5 SDK unterstützt Audioanzeigen, die ähnlich eingerichtet sind wie Videoanzeigen, allerdings mit einige wesentliche Unterschiede. Für alle Teile der IMA-Einrichtung, die in diesem Leitfaden nicht behandelt werden, siehe HTML5 Erste Schritte .

Verwendung eines <audio>-Elements Tag für die Wiedergabe von Inhalten

Der Konstruktor für AdDisplayContainer verwendet das zweite Argument videoElement, das von IMA als Content erfasst wird. Player. Dieses Argument akzeptiert sowohl das Tag <video> als auch das Tag <audio>. Für Audio Inhalte und Anzeigen enthält, wird in diesem Leitfaden empfohlen, ein <audio>-Tag zum Erstellen eines AdDisplayContainer. Wenn Sie Videoinhalte haben, können Sie ein <video>-Tag für mit einer Mischung aus Audio- und Videoanzeigen:

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

AdDisplayContainer ausblenden

Für das IMA HTML5 SDK ist weiterhin ein AdDisplayContainer erforderlich, auch wenn keine zu den Anzeigen oder dem Content hinzufügen. Aus diesem Grund sollten Sie die Spalte AdDisplayContainer Das folgende Beispiel zeigt, wie Sie das Element ausblenden können:

style.css

.ad-container {
  display: none;
}

Benutzerdefinierte Einstellungen

Da „AdDisplayContainer“ ausgeblendet ist, sind benutzerdefinierte Steuerelemente erforderlich, wird während der Werbepausen wiedergegeben. AdsManager enthält Methoden, die für folgende Aktionen verwendet werden können: diese benutzerdefinierten Steuerelemente implementieren:

Überspringbare Anzeigen verarbeiten

Da kein AdDisplayContainer zu sehen ist, kann mit dem IMA SDK kein Schaltfläche Werbung überspringen Um überspringbare Anzeigen zu verarbeiten, müssen Sie folgende IMA-Code-Datei implementieren: Methoden:

Der folgende Beispielcode zeigt, wie dies funktioniert.

ads.js

Sie können eine updateSkippable-Funktion einrichten, um zu bestimmen, ob und wann eine Anzeige können übersprungen werden. Diese Funktion sollte bei jedem AD_PROGRESS-IMA-Ereignis aufgerufen werden. Weitere Informationen finden Sie in der Startleitfaden finden Sie eine Anleitung zur Einrichtung von Listenern für IMA-Ereignisse.

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

Anders als bei Videoanzeigen kann IMA für Audioanzeigen keine Schaltfläche zum Überspringen bereitstellen. Entwickler müssen eine benutzerdefinierte Benutzeroberfläche für überspringbare Anzeigen hinzufügen. einfaches <button>-Tag. Mit dieser updateSkipUI-Funktion wird die Schaltfläche „Überspringen“ aktualisiert. ob die Anzeige überspringbar ist, ob sie aktuell überspringbar ist wie lange es dauert, bis die Anzeige überspringbar wird. Dabei werden die '.hidden'-Klasse, die nicht von IMA bereitgestellt wird. Mit der Klasse .hidden werden display: none; zu <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');
  }
}

Legen Sie schließlich einen Listener für Nutzerklicks auf Ihre benutzerdefinierte Schaltfläche zum Überspringen fest. So kannst du Werbung überspringen: ruf die adsManager.skip() .

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

Dies sind die wichtigsten Änderungen, die erforderlich sind, um das IMA SDK mit Audioanzeigen einzurichten. Für erhalten Sie in der Technisches Forum zum IMA SDK