UI de l'annonce personnalisée

Ce guide explique comment implémenter votre propre interface utilisateur personnalisée à l'aide du SDK IMA pour HTML5. Pour ce faire, vous devez désactiver l'interface utilisateur par défaut, configurer une nouvelle personnalisée, puis remplissez la nouvelle interface avec les informations sur les annonces obtenues à partir de le SDK. Ce guide s'appuie sur échantillon simple pour HTML5.

Ajouter les éléments d'interface utilisateur au DOM

Avant d'écrire du code JavaScript, modifiez le code HTML et la feuille de style pour ajouter les nouveaux éléments de l'interface utilisateur pour les boutons En savoir plus et Ignorer l'annonce, et ; compte à rebours:

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

Vous pouvez personnaliser le style de votre interface utilisateur si vous le souhaitez : l'interface utilisateur ci-dessus à titre d'exemple.

Désactiver l'interface utilisateur intégrée

Commencez par indiquer au SDK que vous souhaitez qu'il désactive son interface utilisateur intégrée.

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

Afficher et masquer votre UI personnalisée (si autorisé)

Certaines annonces Google, telles que les annonces AdSense, ne permettent pas l'utilisation d'une interface utilisateur personnalisée et doivent toujours afficher leur propre UI à la place. Dans la feuille de style au-dessus de l'interface utilisateur personnalisée, div correspond à masquées par défaut. Ne l'afficher que lorsque l'annonce en cours de lecture masque son UI et masquer l'UI personnalisée après chaque annonce au cas où l'annonce suivante autoriser une interface utilisateur personnalisée:

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

Ajouter une logique au bouton En savoir plus

Le premier composant d'interface utilisateur que vous devez intégrer est le bouton En savoir plus. Cet élément informe le SDK lorsqu'un utilisateur clique dessus:

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

Ajouter une logique au compte à rebours

Ensuite, raccordez le compte à rebours qui est utilisé pour interroger le temps restant. dans les annonces.

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

Ajouter une logique au bouton Ignorer l'annonce

Enfin, activez le bouton Ignorer l'annonce. Ce bouton ne s'affiche que pour les annonces désactivables et le compte à rebours doit atteindre 0 pour que permettent à l'utilisateur d'ignorer une annonce.

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

Dépannage

Disposez-vous d'un exemple de tag permettant de désactiver l'UI des annonces ?
Vous pouvez copier l'URL de exemple de tag et le coller dans votre implémentation IMA.
Je ne parviens pas à désactiver l'interface utilisateur par défaut.
Assurez-vous d'avoir défini adsRenderingSettings.disableUi sur true et le transmettre à getAdsManager. Vérifier que ad.isUiDisabled() renvoie true. De plus, votre réseau doit être activé dans Ad Manager pour que vous puissiez désactiver dans l'UI des annonces. Si vous êtes activé, votre fichier VAST contient un élément Extension qui semble par exemple: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Si le problème persiste, contactez votre responsable de compte pour vérifier que votre compte est activé. Certains types d'annonces requièrent une interface utilisateur spécifique. ces annonces renvoient une valeur <UiHideable> de 0. Dans ce cas, votre équipe de trafficking effectuez les modifications nécessaires pour vous assurer que ces types d'annonces ne sont pas diffusés.