Das IMA HTML5 SDK unterstützt Audioanzeigen mit einer ähnlichen Einrichtung wie Videoanzeigen, aber mit einigen wichtigen Unterschieden. Informationen zu allen Teilen der IMA-Einrichtung, die in diesem Leitfaden nicht behandelt werden, finden Sie im HTML5-Startleitfaden.
Verwendung eines <audio>-Tags für die Wiedergabe von Inhalten
Der Konstruktor für AdDisplayContainer verwendet ein zweites Argument namens videoElement, das von IMA als Content-Player erfasst wird. Dieses Argument akzeptiert sowohl ein <video>- als auch ein <audio>-Tag. Für Audioinhalte und ‑anzeigen wird in dieser Anleitung empfohlen, ein <audio>-Tag zu verwenden, um ein AdDisplayContainer zu erstellen. Wenn Sie Videoinhalte haben, können Sie ein <video>-Tag verwenden, um eine Mischung aus Audio- und Videoanzeigen auszuliefern:
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
Das IMA HTML5 SDK erfordert weiterhin ein AdDisplayContainer, auch wenn die Anzeigen oder Inhalte keinen Display-Teil haben. Aus diesem Grund empfehlen wir, die AdDisplayContainer auszublenden. Hier ein Beispiel dafür, wie Sie das Element ausblenden können:
style.css
.ad-container {
display: none;
}
Benutzerdefinierte Steuerelemente
Da die AdDisplayContainer ausgeblendet ist, sind benutzerdefinierte Steuerelemente erforderlich, um die Wiedergabe während Werbeunterbrechungen zu steuern. AdsManager bietet Methoden, mit denen diese benutzerdefinierten Steuerelemente implementiert werden können:
Überspringbare Anzeigen
Da kein sichtbares AdDisplayContainer vorhanden ist, kann das IMA SDK keine Schaltfläche Anzeige überspringen einblenden. Implementieren Sie die folgenden IMA-Methoden, um überspringbare Anzeigen zu verarbeiten:
Der folgende Beispielcode veranschaulicht, wie das geht.
ads.js
Sie können eine updateSkippable-Funktion einrichten, um festzulegen, ob und wann eine Anzeige übersprungen werden kann. Diese Funktion sollte bei jedem AD_PROGRESS-IMA-Ereignis aufgerufen werden.
Eine Anleitung zum Einrichten von Listenern für IMA-Ereignisse finden Sie im Startleitfaden.
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);
}
Im Gegensatz zu 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. Das kann mit einem einfachen <button>-Tag erfolgen. Mit dieser updateSkipUI-Funktion wird die Schaltfläche zum Überspringen aktualisiert. Dabei wird berücksichtigt, ob die Anzeige überspringbar ist, ob sie derzeit überspringbar ist und wie viel Zeit noch verbleibt, bis sie überspringbar wird. Dabei wird die Klasse '.hidden' verwendet, die nicht von IMA bereitgestellt wird. Mit der Klasse .hidden wird display: none; zu <button> hinzugefügt.
/**
* 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. Wenn Sie Anzeigen überspringen möchten, rufen Sie die Funktion adsManager.skip() auf.
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Im Folgenden werden die wichtigsten Änderungen beschrieben, die für die Einrichtung des IMA SDK mit Audioanzeigen erforderlich sind. Wenn Sie Unterstützung bei Implementierungsproblemen benötigen, wenden Sie sich bitte über die Ad Manager-Hilfe an den Support.