UI annuncio personalizzato

Questa guida spiega come implementare una UI personalizzata con l'SDK IMA per HTML5. Per farlo, devi disattivare l'interfaccia utente predefinita, configurare una nuova un'interfaccia utente personalizzata, quindi compila la nuova UI con le informazioni sull'annuncio ottenute l'SDK. Questa guida si basa sul esempio semplice per HTML5.

Aggiungere gli elementi UI al DOM

Prima di scrivere qualsiasi codice JavaScript, modifica il codice HTML e il foglio di stile per aggiungere I nuovi elementi dell'interfaccia utente per i pulsanti Scopri di più, Salta annuncio e timer conto alla rovescia:

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

Se vuoi, puoi modificare lo stile dell'interfaccia utente. l'UI sopra indicata è semplicemente esempio.

Disattivare l'interfaccia utente integrata

Per iniziare, comunica all'SDK che vuoi che disattivi la sua interfaccia utente integrata.

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

Mostra e nascondi l'UI personalizzata quando consentito

Alcuni annunci Google, come gli annunci AdSense, non consentono un'interfaccia utente personalizzata e a eseguire il rendering della propria UI. Nel foglio di stile sopra l'interfaccia utente personalizzata div è nascosti per impostazione predefinita. Mostrala solo quando l'annuncio attualmente in riproduzione nasconde la relativa UI e nascondi l'interfaccia utente personalizzata dopo ogni annuncio nel caso in cui l'annuncio che segue non per consentire un'interfaccia utente personalizzata:

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

Aggiungi logica al pulsante Scopri di più

Il primo componente dell'interfaccia utente che devi collegare è il pulsante Scopri di più. Questo elemento invia una notifica all'SDK quando gli viene fatto clic:

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

Aggiungere logica al timer del conto alla rovescia

Dopodiché collega il timer del conto alla rovescia utilizzato per il polling del tempo rimanente. negli annunci.

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

Aggiungere logica al pulsante Salta annuncio

Infine, collega il pulsante Salta annuncio. Questo pulsante viene visualizzato solo per ignorabili e il relativo timer del conto alla rovescia deve raggiungere 0 prima di attivarsi per consente all'utente di saltare un annuncio.

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

Risoluzione dei problemi

È presente un tag di esempio abilitato per la disattivazione dell'interfaccia utente degli annunci?
Puoi copiare l'URL di questa tag di esempio e incollalo nell'implementazione IMA.
Non riesco a disattivare l'interfaccia utente predefinita.
Assicurati di impostare adsRenderingSettings.disableUi su true e la passiamo al getAdsManager. Verifica che ad.isUiDisabled() restituisce true. Inoltre, è necessario che la rete sia attivata in Ad Manager per poter disattivare dell'interfaccia utente. Se è attivato, il VAST contiene un elemento Extension che sembra come: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Se i problemi persistono, rivolgiti al tuo account manager per verificare che che la tua attività è abilitata. Alcuni tipi di annunci richiedono un'interfaccia utente specifica; questi annunci restituiscono un valore <UiHideable> pari a 0. Se si verifica questo problema, il team di gestione del traffico deve apportare modifiche per garantire che questi tipi di annunci non vengano pubblicati.