Das IMA HTML5 SDK unterstützt Audioanzeigen mit einer ähnlichen Einrichtung wie Videoanzeigen, weist aber einige wichtige Unterschiede auf. Informationen zu Teilen der IMA-Einrichtung, die in diesem Leitfaden nicht behandelt werden, findest du im HTML5-Einstiegsleitfaden.
Verwendung eines <audio>-Tags für die Wiedergabe von Inhalten
Der Konstruktor für AdDisplayContainer nimmt ein zweites Argument namens videoElement entgegen, das von IMA als Inhaltsplayer erfasst wird. Dieses Argument akzeptiert sowohl ein <video>- als auch ein <audio>-Tag. Für Audioinhalte und Anzeigen wird in diesem Leitfaden empfohlen, ein <audio>-Tag zu verwenden, um ein AdDisplayContainer zu erstellen. Wenn Sie Videocontent 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
Für das IMA HTML5 SDK ist weiterhin ein AdDisplayContainer erforderlich, auch wenn die Anzeigen oder Inhalte keinen Displaybereich haben. Aus diesem Grund empfehlen wir, das 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 verarbeiten
Da kein AdDisplayContainer sichtbar ist, kann das IMA SDK keine Schaltfläche Anzeige überspringen anzeigen. Implementiere die folgenden IMA-Methoden, um überspringbare Anzeigen zu verarbeiten:
Im folgenden Beispielcode wird gezeigt, 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 findest du 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 keine Schaltfläche zum Überspringen für Audioanzeigen bereitstellen.
Entwickler müssen eine benutzerdefinierte Benutzeroberfläche für überspringbare Anzeigen hinzufügen. Das geht mit einem einfachen <button>-Tag. Diese updateSkipUI-Funktion aktualisiert die Schaltfläche „Überspringen“ je nachdem, ob die Anzeige überspringbar ist, ob sie derzeit überspringbar ist und wie viel Zeit noch bis zum Überspringen verbleibt. 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');
}
}
Lege abschließend einen Listener für Nutzerklicks auf deine benutzerdefinierte Schaltfläche zum Überspringen fest. Wenn du Werbung überspringen möchtest, rufe die Funktion adsManager.skip() auf.
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Das sind die wichtigsten Änderungen, die erforderlich sind, um das IMA SDK mit Audioanzeigen einzurichten. Antworten auf Implementierungsprobleme finden Sie im IMA SDK Technical Forum.