El SDK de IMA de HTML5 admite anuncios de audio con una configuración similar a la de los anuncios de video, pero con algunas diferencias clave. Si necesitas información sobre alguna parte de la configuración de IMA que no se aborde en esta guía, consulta la guía de introducción a HTML5.
Uso de una etiqueta <audio> para la reproducción de contenido
El constructor de AdDisplayContainer toma un segundo argumento llamado videoElement, al que IMA hace un seguimiento como reproductor de contenido. Este argumento acepta una etiqueta <video> o <audio>. En el caso del contenido de audio y los anuncios, esta guía recomienda usar una etiqueta <audio> para crear un AdDisplayContainer. Si tienes contenido de video, puedes usar una etiqueta <video> para mostrar una combinación de anuncios de audio y video:
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);
Oculta el AdDisplayContainer.
El SDK de IMA para HTML5 sigue requiriendo un elemento AdDisplayContainer, incluso si no hay una parte de visualización para los anuncios o el contenido. Por este motivo, te recomendamos que ocultes el AdDisplayContainer. Consulta un ejemplo de cómo puedes ocultar el elemento:
style.css
.ad-container {
display: none;
}
Controles personalizados
Dado que el AdDisplayContainer está oculto, se necesitan controles personalizados para controlar la reproducción durante las pausas publicitarias. AdsManager tiene métodos que se pueden usar para implementar estos controles personalizados:
Cómo controlar los anuncios que se pueden omitir
Como no hay un AdDisplayContainer visible, el SDK de IMA no puede mostrar un botón de Omitir anuncio. Para controlar los anuncios que se pueden omitir, implementa los siguientes métodos de IMA:
En el siguiente código de muestra, se muestra cómo hacerlo.
ads.js
Puedes configurar una función updateSkippable para determinar si se puede omitir un anuncio y cuándo. Se debe llamar a esta función en cada evento AD_PROGRESS de IMA.
Consulta la guía de introducción para obtener instrucciones sobre cómo configurar los objetos de escucha para los eventos de IMA.
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);
}
A diferencia de los anuncios de video, IMA no puede proporcionar un botón para omitir anuncios de audio.
Los desarrolladores deben agregar una IU personalizada para los anuncios que se pueden omitir, lo que se puede hacer con una etiqueta <button> simple. Esta función updateSkipUI actualiza el botón de omitir según si el anuncio se puede omitir, si se puede omitir en este momento y cuánto tiempo falta para que se pueda omitir. Utiliza la clase '.hidden', que no proporciona IMA. La clase .hidden agrega display: none; a <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');
}
}
Por último, configura un objeto de escucha para los clics del usuario en el botón de omitir personalizado. Para omitir anuncios, llama a la función adsManager.skip().
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Estos son los principales cambios necesarios para configurar el SDK de IMA con anuncios de audio. Si necesitas ayuda con problemas de implementación, comunícate con el Centro de ayuda de Ad Manager.