Interface do anúncio personalizado

Este guia mostra como implementar sua própria interface do usuário personalizada usando o SDK do IMA para HTML5. Para isso, é necessário desativar a interface padrão, configurar uma nova interface personalizada e, em seguida, preencha a nova interface com informações de anúncio obtidas na pelo SDK. Este guia se baseia no exemplo simples para HTML5.

Adicionar os elementos da interface ao DOM

Antes de escrever qualquer JavaScript, modifique o HTML e a folha de estilo para adicionar os novos elementos da interface para os botões Saiba mais, Pular anúncio e timer de contagem regressiva:

index.html

<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
    </video>
  </div>
  <div id="adContainer"></div>
  <div id="customUi">
    <div id="adClick" class="customUIButton">Click me!</div>
    <div id="skipButton" class="customUIButton"></div>
    <div id="adCountdown"></div>
  </div>
</div>

Style.css

...
#customUI {
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
}

.customUIButton {
  position: absolute;
  right: 0px;
  background-color: red;
}

#adClick {
  top: 0px;
  width: 100px;
  height: 50px;
  line-height: 3em;
  cursor: pointer;
}

#skipButton {
  top: 213px;
  width: 150px;
  height: 35px;
  line-height: 2em;
  display: none;
}

#adCountdown {
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 120px;
  height: 20px;
  background-color: red;
}
...

É possível estilizar sua interface de usuário de forma diferente, se você quiser. a interface acima é meramente uma exemplo.

Desativar a interface integrada

Comece dizendo ao SDK que você quer que ele desative a interface integrada.

ads.js

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.disableUi = true;
  // videoContent should be set to the content video element.
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoContent, adsRenderingSettings);
  ...
}

Mostrar e ocultar a interface personalizada quando permitido

Alguns anúncios do Google, como anúncios do AdSense, não permitem uma interface do usuário personalizada e sempre para renderizar a própria interface. Na folha de estilo acima da interface personalizada div está ficam ocultos por padrão. Exibir somente quando o anúncio em reprodução estiver ocultando seu e ocultar a interface personalizada após cada anúncio, caso o anúncio seguinte não permitir uma interface personalizada:

ads.js

let mainContainerDiv, currentAd, customUiDiv;
...
function setUpIMA() {
  customUiDiv = document.getElementById('customUi');
  mainContainerDiv = document.getElementById('mainContainer');
  mainContainerDiv.addEventListener('click', () => {
    // Need this to resume ads after clickthrough.
    adsManager.resume();
  });
  ...
}

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.SKIPPED,
      onAdEvent);
}

function onAdEvent(adEvent) {
  switch(adEvent.type) {
    ...
    case google.ima.AdEvent.Type.STARTED:
      currentAd = adEvent.getAd();
      if (currentAd.isUiDisabled()) {
        showCustomUi();
      }
      break;
    case google.ima.AdEvent.Type.COMPLETE:
    case google.ima.AdEvent.Type.SKIPPED:
      hideCustomUi();
      break;
  }
}

function showCustomUi() {
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  customUiDiv.style.display = 'none';
}

Adicionar lógica ao botão Saiba mais

O primeiro componente de interface que você precisa conectar é o botão Saiba mais. Esse elemento notifica o SDK ao receber um clique:

ads.js

let clickDiv;
...
function setUpIma() {
  ...
  clickDiv = document.getElementById('adClick');
  clickDiv.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    adsManager.clicked();
  });
  ...
}

Adicionar lógica ao timer de contagem regressiva

Em seguida, conecte o timer de contagem regressiva usado na pesquisa do tempo restante em anúncios.

ads.js

let countdownDiv, uiUpdateInterval;
...
function setUpIma() {
  ...
  countdownDiv = document.getElementById('adCountdown');
  ...
}

function showCustomUi() {
  uiUpdateInterval = setInterval(updateUi, 100);
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  if (uiUpdateInterval) {
    clearInterval(uiUpdateInterval);
  }
  customUiDiv.style.display = 'none';
}

function updateUi() {
  updateCountdown();
}

function updateCountdown() {
  let countdownText = 'Ad ';
  const adPodInfo = currentAd.getAdPodInfo();
  const totalAds = adPodInfo.getTotalAds();
  if (totalAds > 1) {
    const position = adPodInfo.getAdPosition();
    countdownText += position + ' of ' + totalAds;
  }
  const remainingTime = Math.ceil(adsManager.getRemainingTime());
  countdownText +=  ' (' + remainingTime + 's)';
  countdownDiv.innerText = countdownText;
}

Adicionar lógica ao botão Skip Ad.

Por fim, configure o botão Skip Ad (Pular anúncio). Esse botão só é exibido para anúncios puláveis e seu contador regressivo deve atingir 0 antes de ser ativado para permitir que o usuário pule um anúncio.

ads.js

let skipDiv;
// Set this infinitely high to fail early <=0 checks.
let timeTillSkip = Number.POSITIVE_INFINITY;
...
function setUpIma() {
  ...
  skipButton = document.getElementById('skipButton');
  skipButton.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    if (timeTillSkip <= 0) {
      adsManager.skip();
    }
  });
  ...
}

function showCustomUi() {
  if (currentAd.isSkippable()) {
    skipButton.innerText = '';
    skipButton.style.display = 'block';
  } else {
    skipButton.style.display = 'none';
  }
  ...
}

function updateUi() {
  updateCountdown();
  if (currentAd.isSkippable()) {
    updateSkip();
  }
}

function updateSkip() {
  const currentTime = currentAd.getDuration() - adsManager.getRemainingTime();
  timeTillSkip = Math.ceil(currentAd.getSkipTimeOffset() - currentTime);
  if (timeTillSkip > 0) {
    skipButton.innerText = "Skip this ad in " + timeTillSkip + '...';
    skipButton.style.cursor = 'default';
   } else {
    skipButton.innerText = "Skip ad";
    skipButton.style.cursor = 'pointer';
  }
}

Solução de problemas

Você tem uma tag de exemplo que desabilite a interface de anúncios?
Você pode copiar o URL deste exemplo de tag e cole na implementação do IMA.
Não consigo desativar a interface padrão.
Verifique se você definiu adsRenderingSettings.disableUi como true e a transmitimos para getAdsManager. Verifique se ad.isUiDisabled() retorna true. Além disso, é preciso ativar sua rede no Ad Manager para desativar interface de anúncio. Se esse recurso estiver ativado, o VAST terá um Extension que parece como: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Se ainda estiver com problemas, verifique com seu gerente de contas para confirmar se estão habilitados. Alguns tipos de anúncios exigem uma interface específica. que esses anúncios retornam com um valor <UiHideable> de 0. Se você encontrar isso, sua equipe de tráfego precisará fazer alterações para garantir que esses tipos de anúncios não sejam veiculados.