El SDK de IMA HTML5 admite anuncios de audio con una configuración similar a la de los anuncios de video, pero con algunas diferencias clave. Si quieres obtener información sobre alguna parte de la configuración de IMA que no se incluye 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 el reproductor de contenido. Este argumento acepta una etiqueta <video> o <audio>. En el caso del contenido y los anuncios de audio, en esta guía se 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 HTML5 aún requiere un AdDisplayContainer, incluso si no hay una parte de visualización en 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
Como 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:
Controla los anuncios que se pueden omitir
Como no hay un AdDisplayContainer visible, el SDK de IMA no puede mostrar un botón 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 IMA de AD_PROGRESS.
Consulta la guía de introducción para obtener instrucciones sobre cómo configurar objetos de escucha para 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 los 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 para omitir según si el anuncio se puede omitir, si se puede omitir en este momento y cuánto tiempo queda hasta que se pueda omitir. Usa 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 de los usuarios en tu botón de omisión personalizado. Para omitir anuncios, llama a la función adsManager.skip().
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Estos son los principales cambios que se necesitan para configurar el SDK de IMA con anuncios de audio. Para obtener respuestas a los problemas de implementación, visita el Foro técnico del SDK de IMA.