Pakiet IMA HTML5 SDK obsługuje reklamy audio o podobnej konfiguracji jak w przypadku reklam wideo, ale z kilkoma kluczowymi różnicami. Elementy konfiguracji IMA, które nie zostały omówione w tym przewodniku, znajdziesz w artykule Pierwsze kroki z HTML5.
użycie tagu <audio> do odtwarzania treści,
Konstruktor AdDisplayContainer przyjmuje drugi argument o nazwie videoElement, który IMA śledzi jako odtwarzacz treści. Ten argument akceptuje zarówno tag <video>, jak i <audio>. W przypadku reklam i treści audio w tym przewodniku zalecamy użycie tagu <audio> do tworzenia AdDisplayContainer. Jeśli masz treści wideo, możesz używać tagu <video> do wyświetlania mieszanych 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);
Ukrywam element AdDisplayContainer
Pakiet IMA HTML5 SDK nadal wymaga elementu AdDisplayContainer, nawet jeśli reklamy ani treści nie zawierają elementów displayowych. Dlatego zalecamy ukrycie AdDisplayContainer. Poniżej znajduje się przykład sposobu ukrycia elementu:
style.css
.ad-container {
display: none;
}
Niestandardowe elementy sterujące
Element AdDisplayContainer jest ukryty, dlatego do obsługi odtwarzania w czasie przerw na reklamę potrzebne są niestandardowe elementy sterujące. AdsManager ma metody, których można używać do implementacji tych niestandardowych ustawień:
Obsługa reklam możliwych do pominięcia
Nie ma widocznego AdDisplayContainer, więc pakiet IMA SDK nie może wyświetlić przycisku Pomiń reklamę. Aby obsługiwać reklamy możliwe do pominięcia, zaimplementuj te metody IMA:
Przykładowy kod poniżej pokazuje, jak to zrobić.
ads.js
Możesz skonfigurować funkcję updateSkippable, aby określić, czy i kiedy można pominąć reklamę. Funkcję tę należy wywoływać przy każdym zdarzeniu IMA AD_PROGRESS.
Informacje 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/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);
}
W przeciwieństwie do reklam wideo IMA nie może zapewnić przycisku pominięcia w przypadku reklam audio.
Deweloperzy muszą dodać niestandardowy interfejs do reklam możliwych do pominięcia, używając prostego tagu <button>. Ta funkcja updateSkipUI aktualizuje przycisk pominięcia na podstawie tego, czy reklamę można pominąć i czy jest ona obecnie możliwa do pominięcia oraz ile czasu pozostało do pominięcia reklamy. Wykorzystywana jest klasa '.hidden', której nie dostarcza IMA. Klasa .hidden dodaje element display: none; do klasy <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');
}
}
Na koniec skonfiguruj odbiornik kliknięć niestandardowego przycisku pominięcia. Aby pominąć reklamy, wywołaj funkcję adsManager.skip().
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Oto główne zmiany niezbędne do skonfigurowania pakietu IMA SDK z reklamami audio. Rozwiązania problemów z implementacją znajdziesz na forum technicznym pakietu IMA SDK.