El SDK HTML5 de IMA admite anuncios de audio con una configuración similar a la de los anuncios de video, pero con algunas diferencias clave. Para cualquier parte de la configuración de IMA que no se aborde en esta guía, consulta la guía de introducción de HTML5.
Uso de una etiqueta <audio> para la reproducción de contenido
El constructor de AdDisplayContainer toma un segundo argumento llamado videoElement que IMA realiza un seguimiento como reproductor de contenido. Este argumento acepta etiquetas <video> o <audio>. En esta guía, se recomienda usar una etiqueta <audio> para crear un AdDisplayContainer para el contenido de audio y los anuncios. 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);
Cómo ocultar el AdDisplayContainer
El SDK de IMA HTML5 requiere un AdDisplayContainer, incluso si no hay una sección de visualización de los anuncios o el contenido. Por este motivo, te recomendamos ocultar el objeto AdDisplayContainer. A continuación, se muestra un ejemplo de cómo puedes ocultar el elemento:
style.css
.ad-container {
display: none;
}
Controles personalizados
Como el objeto 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:
Administración de anuncios que se pueden omitir
Debido a que 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 código de muestra que aparece a continuación, se demuestra 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 de IMA AD_PROGRESS.
Consulta la Guía de introducción si necesitas instrucciones para 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/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);
}
A diferencia de los anuncios de video, el IMA no puede proporcionar un botón de omisión para los anuncios de audio.
Los desarrolladores deben agregar una IU personalizada para los anuncios que se pueden omitir. Esto se puede hacer con una etiqueta <button> simple. Esta función updateSkipUI actualiza el botón Omitir en función de si el anuncio se puede omitir, si actualmente se puede omitir y cuánto tiempo queda para que el anuncio 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 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. Para obtener respuestas a problemas de implementación, visita el Foro técnico del SDK de IMA.