UI โฆษณาที่กำหนดเอง

คู่มือนี้แสดงวิธีใช้งาน UI ที่กำหนดเองของคุณเองโดยใช้ IMA SDK HTML5 ได้ ในการทำเช่นนั้น คุณต้องปิดใช้ UI เริ่มต้น แล้วตั้งค่า UI ที่กำหนดเอง และสร้าง UI ใหม่ด้วยข้อมูลโฆษณาที่ได้รับจาก SDK คู่มือนี้สร้างขึ้นจาก ตัวอย่างง่ายๆ HTML5 ได้

เพิ่มองค์ประกอบ UI ลงใน DOM

ก่อนที่คุณจะเขียน JavaScript ให้แก้ไข HTML และสไตล์ชีตเพื่อเพิ่ม องค์ประกอบ UI ใหม่สำหรับปุ่มดูข้อมูลเพิ่มเติม ปุ่มข้ามโฆษณา และ นาฬิกานับเวลาถอยหลัง:

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

คุณสามารถจัดรูปแบบ UI แตกต่างออกไปได้ หากต้องการ UI ข้างต้นเป็นเพียง

ปิดใช้งาน UI ในตัว

เริ่มต้นด้วยการบอก SDK ว่าคุณต้องการปิดใช้ UI ในตัว

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

แสดงและซ่อน UI ที่กำหนดเองเมื่อได้รับอนุญาต

โฆษณา Google บางรายการ เช่น โฆษณา AdSense ไม่อนุญาตให้ใช้ UI ที่กำหนดเอง และ แสดงผล UI ของตนเองแทน ในสไตล์ชีตด้านบน UI ที่กำหนดเอง div คือ ซ่อนอยู่โดยค่าเริ่มต้น แสดงเฉพาะโฆษณาที่กำลังเล่นซ่อนอยู่ UI และซ่อน UI ที่กำหนดเองหลังจากโฆษณาแต่ละรายการ ในกรณีที่โฆษณาที่ตามมาไม่ อนุญาต UI ที่กำหนดเอง:

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

เพิ่มตรรกะลงในปุ่มดูข้อมูลเพิ่มเติม

คอมโพเนนต์ UI แรกที่คุณต้องเชื่อมต่อคือปุ่มดูข้อมูลเพิ่มเติม องค์ประกอบนี้ แจ้ง SDK เมื่อมีการคลิกดังนี้

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

เพิ่มตรรกะในนาฬิกานับเวลาถอยหลัง

จากนั้น เดินสายนาฬิกานับเวลาถอยหลังที่ใช้ในการสำรวจเวลาที่เหลือ ในโฆษณา

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

เพิ่มตรรกะให้กับปุ่มข้ามโฆษณา

สุดท้าย ให้ปรับปุ่มข้ามโฆษณา ปุ่มนี้จะแสดงสำหรับ โฆษณาแบบข้ามได้และนาฬิกานับเวลาถอยหลังต้องถึง 0 จึงจะเปิดใช้งานได้ ทำให้ผู้ใช้ข้ามโฆษณาได้

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

การแก้ปัญหา

คุณมีตัวอย่างแท็กที่เปิดใช้การปิดใช้ UI โฆษณาไหม
คุณสามารถคัดลอก URL ของ ตัวอย่างแท็ก และวางลงในการติดตั้งใช้งาน IMA
ฉันไม่สามารถปิดใช้ UI เริ่มต้น
ตรวจสอบว่าได้ตั้งค่า adsRenderingSettings.disableUi เป็น true แล้ว และส่งไปยัง getAdsManager ตรวจสอบว่า ad.isUiDisabled() แสดงผล true นอกจากนี้ คุณต้องเปิดใช้เครือข่ายใน Ad Manager เพื่อปิดใช้ UI โฆษณา หากคุณเปิดใช้ VAST จะมี Extension ที่ดูเหมือน อย่างเช่น: 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 หากคุณยังคงประสบปัญหา โปรดตรวจสอบกับผู้จัดการฝ่ายดูแลลูกค้าเพื่อยืนยันว่า เปิดใช้แล้ว โฆษณาบางประเภทต้องใช้ UI ที่เฉพาะเจาะจง โฆษณาเหล่านี้จึงแสดง ค่า <UiHideable> เป็น 0 หากคุณพบปัญหานี้ ทีมดูแลการแสดงโฆษณาต้อง ทำการเปลี่ยนแปลงเพื่อให้มั่นใจว่าประเภทโฆษณาเหล่านี้จะไม่แสดง