IU de anuncios personalizados

En esta guía, se muestra cómo implementar su propia IU personalizada con el SDK de IMA para HTML5. Para ello, debes inhabilitar la IU predeterminada, configurar una nueva personalizada y, luego, completar la nueva IU con la información del anuncio obtenida de el SDK. Esta guía se basa en muestra simple para HTML5.

Agrega los elementos de la IU al DOM

Antes de escribir JavaScript, modifica el código HTML y la hoja de estilo para agregar los nuevos elementos de la IU para los botones Más información, Omitir anuncio y temporizador de cuenta regresiva:

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;
}
...

Si lo deseas, puedes diseñar tu IU de manera diferente. la IU anterior es solo un ejemplo.

Cómo inhabilitar la IU integrada

Primero, indícale al SDK que quieres que inhabilite su IU 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 y ocultar tu IU personalizada cuando se permita

Algunos anuncios de Google, como los de AdSense, no permiten una IU personalizada y siempre renderizan su propia IU en su lugar. En la hoja de estilo que aparece arriba de la IU personalizada, div es oculta de forma predeterminada. Mostrarlo solo cuando el anuncio que se está reproduciendo oculta su IU y oculte la IU personalizada después de cada anuncio en caso de que el siguiente no Permitir una IU 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';
}

Agrega lógica al botón Más información

El primer componente de IU que debes conectar es el botón Más información. Este elemento notifica al SDK cuando se hace clic en él:

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();
  });
  ...
}

Cómo agregar lógica al temporizador de cuenta regresiva

Luego, conecta el temporizador de cuenta regresiva que se usa para sondear el tiempo restante. en los anuncios.

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

Agrega lógica al botón Omitir anuncio.

Por último, conecta el botón Omitir anuncio. Este botón solo se muestra para Los anuncios que se pueden omitir y el temporizador de cuenta regresiva deben llegar a 0 antes de activarse para permiten que el usuario omita un anuncio.

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';
  }
}

Soluciona problemas

¿Tienes una etiqueta de muestra habilitada para inhabilitar la IU del anuncio?
Puedes copiar la URL de este etiqueta de muestra y pégala en tu implementación de IMA.
No puedo inhabilitar la IU predeterminada.
Asegúrate de haber establecido adsRenderingSettings.disableUi en true y pásala a la getAdsManager. Verifica que ad.isUiDisabled() muestra true. Además, tu red debe estar habilitada en Ad Manager para inhabilitar en la IU del anuncio. Si está habilitado, su VAST contiene un Extension que parece como: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Si sigues teniendo problemas, consulta con tu administrador de cuentas para confirmar lo siguiente: que tienes habilitado. Algunos tipos de anuncios requieren una IU específica. estos anuncios muestran un valor de <UiHideable> de 0. Si te encuentras con esto, tu equipo de coordinación de anuncios debe realizar cambios para asegurarse de que no se publiquen.