Anúncios de áudio

O SDK para HTML5 do IMA é compatível com anúncios em áudio com uma configuração semelhante aos anúncios em vídeo, mas com algumas diferenças importantes. Para qualquer parte da configuração do IMA não abordada neste guia, consulte o Guia explicativo de HTML5.

Uso de uma tag <audio> para reprodução de conteúdo

O construtor de AdDisplayContainer usa um segundo argumento chamado videoElement, que o IMA rastreia como o player de conteúdo. Esse argumento aceita tags <video> ou <audio>. Para conteúdo de áudio e anúncios, este guia recomenda o uso de uma tag <audio> para criar um AdDisplayContainer. Se você tiver conteúdo em vídeo, use uma tag <video> para exibir uma combinação de anúncios em áudio e vídeo:

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);

Como ocultar o AdDisplayContainer

O SDK do IMA para HTML5 ainda exige um AdDisplayContainer, mesmo que não haja parte de exibição dos anúncios ou do conteúdo. Por esse motivo, recomendamos ocultar o AdDisplayContainer. Confira abaixo um exemplo de como ocultar o elemento:

style.css

.ad-container {
  display: none;
}

Controles personalizados

Como o AdDisplayContainer está oculto, são necessários controles personalizados para processar a reprodução durante os intervalos de anúncio. AdsManager tem métodos que podem ser usados para implementar esses controles personalizados:

• pause()
• resume()
• setVolume()

Como processar anúncios puláveis

Como não há AdDisplayContainer visível, o SDK do IMA não pode mostrar um botão Pular anúncio. Para processar anúncios puláveis, implemente os seguintes métodos do IMA:

• AdsManager.getAdSkippableState()
• AdEvent.getAdData()
• Ad.getSkipTimeOffset()

O exemplo de código abaixo demonstra como fazer isso.

ads.js

É possível configurar uma função updateSkippable para determinar se e quando um anúncio pode ser ignorado. Essa função deve ser chamada em cada evento AD_PROGRESS do IMA. Consulte o Guia explicativo para instruções sobre como configurar listeners para eventos do 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);
  }

Ao contrário dos anúncios em vídeo, o IMA não fornece um botão "Pular" para anúncios em áudio. Os desenvolvedores precisam adicionar uma interface personalizada para anúncios puláveis, o que pode ser feito com uma tag <button> simples. A função updateSkipUI atualiza o botão "Pular" com base em se o anúncio é pulável, se é pulável no momento e quanto tempo resta até que ele se torne pulável. Ela usa a classe '.hidden', que não é fornecida pelo IMA. A classe .hidden adiciona display: none; ao <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 fim, defina um listener para os cliques do usuário no seu botão "Pular" personalizado. Para pular anúncios, chame a função adsManager.skip().

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

Estas são as principais alterações necessárias para configurar o SDK do IMA com anúncios em áudio. Para encontrar respostas sobre problemas de implementação, acesse o Fórum técnico do SDK do IMA.