Das IMA HTML5 SDK unterstützt Audioanzeigen, die ähnlich eingerichtet sind wie Videoanzeigen, aber es gibt einige wichtige Unterschiede. Informationen zur IMA-Einrichtung, die in diesem Leitfaden nicht behandelt werden, sind im HTML5-Startleitfaden enthalten.
Verwendung eines <audio>-Tags für die Inhaltswiedergabe
Der Konstruktor für AdDisplayContainer verwendet ein zweites Argument namens videoElement, das von IMA als Inhaltsplayer erfasst wird. Dieses Argument akzeptiert sowohl ein <video>- als auch ein <audio>-Tag. Für Audiocontent und -anzeigen wird empfohlen, ein <audio>-Tag zum Erstellen einer AdDisplayContainer zu verwenden. Wenn Sie Videoinhalte haben, können Sie ein <video>-Tag verwenden, um eine Kombination 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 auch dann ein AdDisplayContainer, wenn die Anzeigen oder Inhalte keinen Darstellungsteil enthalten. Aus diesem Grund empfehlen wir, AdDisplayContainer auszublenden. Im Folgenden finden Sie ein Beispiel dafür, wie Sie das Element ausblenden können:
style.css
.ad-container {
display: none;
}
Benutzerdefinierte Einstellungen
Da AdDisplayContainer ausgeblendet ist, sind benutzerdefinierte Steuerelemente für die Wiedergabe während Werbeunterbrechungen erforderlich. AdsManager enthält Methoden, mit denen diese benutzerdefinierten Steuerelemente implementiert werden können:
Umgang mit überspringbaren Anzeigen
Da kein AdDisplayContainer sichtbar ist, kann im IMA SDK die Schaltfläche Anzeige überspringen nicht eingeblendet werden. Um überspringbare Anzeigen zu verarbeiten, müssen folgende IMA-Methoden implementiert werden:
Der folgende Beispielcode zeigt, wie das funktioniert.
ads.js
Sie können eine updateSkippable-Funktion einrichten, um zu bestimmen, 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/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);
}
Im Gegensatz zu Videoanzeigen kann IMA bei Audioanzeigen keine Schaltfläche zum Überspringen bereitgestellt werden.
Entwickler müssen über ein einfaches <button>-Tag eine benutzerdefinierte Benutzeroberfläche für überspringbare Anzeigen hinzufügen. Mit dieser updateSkipUI-Funktion wird die Schaltfläche „Überspringen“ aktualisiert, je nachdem, ob die Anzeige überspringbar ist, ob die Anzeige derzeit überspringbar ist und wie viel Zeit noch bleibt, bis die Anzeige überspringbar ist. Dabei wird die Klasse '.hidden' verwendet, die nicht von IMA bereitgestellt wird. Die Klasse .hidden fügt der Klasse <button> display: none; hinzu.
/**
* 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 abschließend 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();
});
Dies sind die wichtigsten Änderungen, die erforderlich sind, um das IMA SDK mit Audioanzeigen einzurichten. Antworten auf Fragen zur Implementierung finden Sie im IMA SDK Technical Forum.