Giao diện người dùng quảng cáo tùy chỉnh

Tài liệu hướng dẫn này trình bày cách triển khai giao diện người dùng tuỳ chỉnh của riêng bạn bằng SDK IMA cho HTML5. Để thực hiện điều này, bạn cần vô hiệu hoá giao diện người dùng mặc định, thiết lập giao diện người dùng tuỳ chỉnh, rồi điền vào giao diện người dùng mới những thông tin quảng cáo có được từ SDK. Hướng dẫn này dựa trên mẫu đơn giản cho HTML5.

Lưu ý: Bạn phải bật tài khoản Ad Manager để sử dụng tính năng này. Để biết thêm thông tin, hãy liên hệ với người quản lý tài khoản.

Thêm các thành phần trên giao diện người dùng vào DOM

Trước khi bạn viết bất kỳ JavaScript nào, hãy sửa đổi HTML và biểu định kiểu để thêm các thành phần mới trên giao diện người dùng cho nút Tìm hiểu thêm, nút Bỏ qua quảng cáo và đồng hồ đếm ngược:

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

Bạn có thể tạo kiểu giao diện người dùng theo cách khác nếu muốn; giao diện người dùng ở trên chỉ là một ví dụ:

Tắt giao diện người dùng tích hợp sẵn

Hãy bắt đầu bằng cách cho SDK biết rằng bạn muốn SDK vô hiệu hoá giao diện người dùng tích hợp sẵn.

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

Hiện và ẩn giao diện người dùng tuỳ chỉnh khi được cho phép

Một số quảng cáo của Google, chẳng hạn như quảng cáo AdSense, không cho phép giao diện người dùng tuỳ chỉnh và luôn luôn hiển thị giao diện người dùng của riêng họ. Trong biểu định kiểu ở trên giao diện người dùng tuỳ chỉnh div là ẩn theo mặc định. Chỉ hiển thị khi quảng cáo hiện đang phát đang ẩn và ẩn giao diện người dùng tuỳ chỉnh sau mỗi quảng cáo trong trường hợp quảng cáo theo sau không cho phép giao diện người dùng tuỳ chỉnh:

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

Thêm logic vào nút Tìm hiểu thêm

Thành phần giao diện người dùng đầu tiên bạn cần kết nối là nút Tìm hiểu thêm. Phần tử này thông báo cho SDK khi người dùng nhấp vào 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();
  });
  ...
}

Thêm logic vào đồng hồ đếm ngược

Tiếp theo, hãy kết nối đồng hồ đếm ngược dùng để thăm dò thời gian còn lại trong quảng cáo.

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

Thêm logic vào nút Bỏ qua quảng cáo

Cuối cùng, hãy kết nối nút Bỏ qua quảng cáo. Nút này chỉ được hiển thị cho quảng cáo có thể bỏ qua và đồng hồ đếm ngược của quảng cáo phải đạt 0 trước khi quảng cáo kích hoạt để cho phép người dùng bỏ qua quảng cáo.

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

Khắc phục sự cố

Bạn có thẻ mẫu được bật để vô hiệu hóa giao diện người dùng quảng cáo không?

Bạn có thể sao chép URL của nội dung này thẻ mẫu rồi dán vào phương thức triển khai IMA.

Tôi không tắt được giao diện người dùng mặc định.

Kiểm tra để đảm bảo rằng bạn đã đặt adsRenderingSettings.disableUi thành true rồi truyền tệp đó đến getAdsManager. Kiểm tra để đảm bảo rằng ad.isUiDisabled() sẽ trả về true. Ngoài ra, bạn phải bật mạng của mình trong Ad Manager để vô hiệu hoá giao diện người dùng của quảng cáo. Nếu bạn được bật, VAST của bạn sẽ chứa Extension trông như:

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

Nếu bạn vẫn gặp sự cố, hãy liên hệ với người quản lý tài khoản để xác nhận rằng mà bạn đã được kích hoạt. Một số loại quảng cáo yêu cầu giao diện người dùng cụ thể; những quảng cáo này trả về cùng với giá trị <UiHideable> bằng 0. Nếu bạn gặp phải vấn đề này, nhóm quản lý quảng cáo phải thực hiện thay đổi để đảm bảo các loại quảng cáo này không phân phát.