Benutzeroberfläche für benutzerdefinierte Anzeigen

In diesem Leitfaden erfahren Sie, wie Sie mit dem IMA SDK Ihre eigene benutzerdefinierte Benutzeroberfläche implementieren. für HTML5. Dazu müssen Sie die Standardbenutzeroberfläche deaktivieren, eine neue und fügen Sie in die neue Benutzeroberfläche Anzeigeninformationen ein, die Sie des SDK. Dieser Leitfaden baut auf der einfaches Beispiel für HTML5.

UI-Elemente zum DOM hinzufügen

Bevor Sie JavaScript schreiben, ändern Sie den HTML-Code und das Stylesheet, um die der neuen UI-Elemente für die Schaltflächen Weitere Informationen und Werbung überspringen und Countdown-Timer:

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

Wenn Sie möchten, können Sie Ihre Benutzeroberfläche anders gestalten: ist die obige Benutzeroberfläche lediglich Beispiel.

Integrierte UI deaktivieren

Teilen Sie dem SDK zuerst mit, dass die integrierte UI deaktiviert werden soll.

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

Benutzerdefinierte UI ein- und ausblenden, wenn dies erlaubt ist

Für einige Google-Anzeigen wie AdSense-Anzeigen ist keine benutzerdefinierte Benutzeroberfläche zulässig. und rendern stattdessen ihre eigene UI. Im Stylesheet über der benutzerdefinierten Benutzeroberfläche wird div ist standardmäßig ausgeblendet. Nur anzeigen, wenn die derzeit wiedergegebene Anzeige ihre Benutzeroberfläche und blendet die benutzerdefinierte Benutzeroberfläche nach jeder Anzeige aus, falls die folgende Anzeige die eine benutzerdefinierte UI zulassen:

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

Füge der Schaltfläche Weitere Informationen eine Logik hinzu.

Die erste UI-Komponente, die Sie verbinden müssen, ist die Schaltfläche Weitere Informationen. Dieses Element benachrichtigt das SDK, wenn darauf geklickt wurde:

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

Dem Countdown-Timer eine Logik hinzufügen

Als Nächstes verbinden Sie den Countdown-Timer, der zum Abfragen der verbleibenden Zeit verwendet wird. in Anzeigen.

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

Der Schaltfläche Anzeige überspringen Logik hinzufügen

Verbinden Sie zum Schluss die Schaltfläche Werbung überspringen. Diese Schaltfläche wird nur für müssen überspringbare Anzeigen und der zugehörige Countdown-Timer 0 erreichen, bevor sie aktiviert werden. Der Nutzer kann eine Anzeige überspringen.

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

Fehlerbehebung

Haben Sie ein Beispiel-Tag, mit dem die Anzeigen-UI deaktiviert werden kann?
Sie können die URL dieses Beispiel-Tag und fügen Sie ihn in Ihre IMA-Implementierung ein.
Ich kann die Standardbenutzeroberfläche nicht deaktivieren.
Achten Sie darauf, dass adsRenderingSettings.disableUi auf true festgelegt ist und an getAdsManager übergeben. Prüfen Sie, ob ad.isUiDisabled() gibt true zurück. Außerdem muss Ihr Netzwerk in Ad Manager aktiviert sein, damit auf der Benutzeroberfläche. Wenn diese Funktion aktiviert ist, enthält der VAST-Code ein Extension, das wie: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 Sollten weiterhin Probleme auftreten, wenden Sie sich an Ihren Account Manager, um sicherzustellen, sind Sie aktiviert. Für einige Anzeigentypen ist eine spezielle Benutzeroberfläche erforderlich. werden diese Anzeigen mit den <UiHideable>-Wert 0 haben. In diesem Fall muss Ihr Trafficking-Team Änderungen vornehmen, damit diese Anzeigentypen nicht mehr ausgeliefert werden.