Anuncios sonoros

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. Para las partes de la configuración de IMA que no se abordan en esta guía, consulte la página de introducción a HTML5 de la guía de YouTube.

Uso de un <audio> etiqueta para la reproducción de contenido

El constructor de AdDisplayContainer toma un segundo argumento llamado videoElement que IMA realiza un seguimiento como el contenido. de fútbol favorito. Este argumento acepta una etiqueta <video> o <audio>. Para audio contenido y anuncios, 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);

Cómo ocultar AdDisplayContainer

El SDK de IMA HTML5 requiere un elemento AdDisplayContainer incluso si no hay mostrar a los anuncios o al contenido. Por este motivo, te recomendamos ocultar AdDisplayContainer A continuación, se muestra un ejemplo de cómo ocultar el elemento:

style.css

.ad-container {
  display: none;
}

Controles personalizados

Dado que AdDisplayContainer está oculto, se necesitan controles personalizados para controlarlos. la reproducción durante las pausas publicitarias. AdsManager tiene métodos que se pueden usar para implementar estos controles personalizados:

Cómo administrar anuncios que se pueden omitir

Como no hay AdDisplayContainer visible, el SDK de IMA no puede mostrar un Botón Omitir anuncio. Para administrar los anuncios que se pueden omitir, implemente el siguiente IMA métodos:

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 muestra un anuncio y cuándo se pueden omitir. Se debe llamar a esta función en cada evento de IMA 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/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, 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, lo que se puede hacer con un etiqueta <button> simple. Esta función updateSkipUI actualiza el botón Omitir en función de si el anuncio se puede omitir, si actualmente este último se puede omitir cuánto tiempo falta para que se pueda omitir el anuncio. Utiliza el 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 tu botón de omisión personalizado. Para omitir los anuncios, Llamar a 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 para resolver problemas de implementación, visita el Foro técnico del SDK de IMA.