UI Iklan Kustom

Panduan ini menunjukkan cara menerapkan UI kustom Anda sendiri menggunakan IMA SDK untuk HTML5. Untuk melakukannya, Anda perlu menonaktifkan UI default, menyiapkan UI kustom, lalu mengisi UI baru dengan informasi iklan yang diperoleh SDK. Panduan ini dibuat berdasarkan contoh sederhana untuk HTML5.

Catatan: Akun Ad Manager Anda harus diaktifkan agar dapat menggunakan fitur ini. Untuk informasi selengkapnya, hubungi Account Manager Anda.

Menambahkan elemen UI ke DOM

Sebelum Anda menulis JavaScript, ubah HTML dan stylesheet untuk menambahkan elemen UI baru untuk tombol Pelajari Lebih Lanjut, tombol Lewati Iklan, dan penghitung mundur:

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

Anda dapat menata gaya UI Anda secara berbeda jika diinginkan; UI di atas hanyalah contoh.

Menonaktifkan UI bawaan

Mulailah dengan memberi tahu SDK bahwa Anda ingin menonaktifkan UI bawaannya.

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

Tampilkan dan sembunyikan UI kustom jika diizinkan

Beberapa iklan Google, seperti iklan AdSense, tidak mengizinkan UI kustom, dan selalu merender UI-nya sendiri. Di stylesheet di atas UI kustom div adalah disembunyikan secara default. Tampilkan hanya jika iklan yang sedang diputar menyembunyikannya dan sembunyikan UI kustom setelah setiap iklan jika iklan yang mengikutinya tidak izinkan UI kustom:

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

Menambahkan logika ke tombol Pelajari Lebih Lanjut

Komponen UI pertama yang perlu Anda hubungkan adalah tombol Pelajari Lebih Lanjut. Elemen ini akan memberi tahu SDK saat diklik:

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

Menambahkan logika ke penghitung mundur

Selanjutnya, sambungkan penghitung mundur yang digunakan dalam polling sisa waktu dalam iklan.

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

Menambahkan logika ke tombol Lewati Iklan

Terakhir, hubungkan tombol Skip Ad. Tombol ini hanya ditampilkan untuk iklan yang dapat dilewati dan penghitung mundurnya harus mencapai 0 sebelum diaktifkan untuk pengguna dapat melewati iklan.

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

Pemecahan masalah

Apakah Anda memiliki tag contoh yang diaktifkan untuk menonaktifkan UI iklan?

Anda dapat menyalin URL ini contoh tag dan menempelkannya ke dalam penerapan IMA Anda.

Saya tidak dapat menonaktifkan UI default.

Periksa untuk memastikan bahwa Anda menetapkan adsRenderingSettings.disableUi ke true dan meneruskannya ke getAdsManager. Periksa untuk mengetahui bahwa ad.isUiDisabled() akan menampilkan true. Selain itu, jaringan Anda harus diaktifkan di Ad Manager untuk menonaktifkan UI iklan. Jika diaktifkan, VAST Anda berisi Extension yang terlihat seperti:

<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>

Jika Anda masih mengalami masalah, hubungi Account Manager Anda untuk mengonfirmasi bahwa kemampuan Anda. Beberapa jenis iklan memerlukan UI khusus; iklan ini menghasilkan nilai <UiHideable> 0. Jika Anda mengalaminya, tim proses iklan Anda harus membuat perubahan untuk memastikan jenis iklan tersebut tidak ditayangkan.