Quảng cáo audio

SDK IMA HTML5 hỗ trợ quảng cáo dạng âm thanh có cách thiết lập tương tự như quảng cáo dạng video nhưng có một số điểm khác biệt chính. Đối với bất kỳ phần nào của quy trình thiết lập IMA không được đề cập trong hướng dẫn này, hãy xem Hướng dẫn bắt đầu sử dụng HTML5.

Sử dụng thẻ <audio> để phát nội dung

Hàm khởi tạo cho AdDisplayContainer sẽ lấy đối số thứ hai có tên là videoElement mà IMA theo dõi dưới dạng trình phát nội dung. Đối số này chấp nhận cả thẻ <video> hoặc <audio>. Đối với nội dung âm thanh và quảng cáo, hướng dẫn này khuyên bạn nên sử dụng thẻ <audio> để tạo AdDisplayContainer. Nếu có nội dung video, bạn có thể sử dụng thẻ <video> để hiển thị kết hợp quảng cáo dạng âm thanh và video:

index.html

<audio id="audio-player"></audio>
<div class="ad-container"></div>

ads.js

audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);

Ẩn AdDisplayContainer

SDK IMA HTML5 vẫn yêu cầu AdDisplayContainer ngay cả khi không có phần hiển thị nào cho quảng cáo hoặc nội dung. Vì lý do này, bạn nên ẩn AdDisplayContainer. Dưới đây là ví dụ về cách bạn có thể ẩn phần tử này:

style.css

.ad-container {
  display: none;
}

Điều khiển tuỳ chỉnh

Vì AdDisplayContainer bị ẩn nên cần có các nút điều khiển tuỳ chỉnh để xử lý việc phát trong các điểm chèn quảng cáo. AdsManager có các phương thức có thể được dùng để triển khai các chế độ kiểm soát tuỳ chỉnh sau:

Xử lý quảng cáo có thể bỏ qua

Vì không có AdDisplayContainer nào hiển thị nên SDK IMA không thể hiển thị nút Bỏ qua quảng cáo. Để xử lý quảng cáo có thể bỏ qua, hãy triển khai các phương thức IMA sau:

Mã mẫu dưới đây minh hoạ cách thực hiện việc này.

ads.js

Bạn có thể thiết lập hàm updateSkippable để xác định xem có thể bỏ qua một quảng cáo hay không và khi nào. Hàm này sẽ được gọi trên mỗi sự kiện IMA AD_PROGRESS. Hãy xem Hướng dẫn bắt đầu sử dụng để biết hướng dẫn về cách thiết lập trình nghe cho các sự kiện IMA.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
    audioPlayer);

  ...

  adsManager.addEventListener(
    google.ima.AdEvent.Type.AD_PROGRESS,
    onAdEvent);

  ...

}

function onAdEvent(adEvent) {
  const ad = adEvent.getAd();
  if (ad) {
    currentAd = ad; // currentAd is defined outside of this functions scope.
  }
  switch (adEvent.type) {

    ...

    case google.ima.AdEvent.Type.AD_PROGRESS:
      // See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdProgressData
      const adProgressData = adEvent.getAdData();

      updateSkippable(
        adProgressData.currentTime,
        currentAd.getSkipTimeOffset()
      );
      break;
    ...

  }
}

/**
   * Called when there may be a change in the skippable state.
   * @param {number} currentTime The current time of the
   * currently playing ad.
   * @param {number} skipTimeOffset The number of seconds of playback
   * before the ad becomes skippable. -1 is returned for non skippable
   * ads or if this is unavailable.
   */
  updateSkippable(currentTime, skipTimeOffset) {
    const isAdSkippable = skipTimeOffset !== -1;
    const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
    const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
    updateSkipUI(
        isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
  }

Không giống như quảng cáo dạng video, IMA không thể cung cấp nút bỏ qua cho quảng cáo dạng âm thanh. Nhà phát triển phải thêm giao diện người dùng tuỳ chỉnh cho quảng cáo có thể bỏ qua. Bạn có thể thực hiện việc này bằng một thẻ <button> đơn giản. Hàm updateSkipUI này cập nhật nút bỏ qua dựa trên việc liệu quảng cáo có thể bỏ qua hay không, liệu quảng cáo hiện có thể bỏ qua hay không và thời gian còn lại cho đến khi quảng cáo có thể bỏ qua. Phương thức này sử dụng lớp '.hidden' không do IMA cung cấp. Lớp .hidden sẽ thêm display: none; vào <button>.

/**
 * Updates the skip button UI.
 * @param {boolean} isAdSkippable if the current ad is a skippable ad.
 * @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
 * @param {number} timeTillSkipInSeconds time until the ad can be skipped in
 * seconds.
 */
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
  if (isAdSkippable) {
    skipButton.classList.remove('hidden');
    if (isSkipCurrentlyAllowed) {
      skipButton.textContent = 'Skip ad';
      skipButton.disabled = false;
    } else {
      skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
      skipButton.disabled = true;
    }
  } else {
    skipButton.classList.add('hidden');
  }
}

Cuối cùng, hãy thiết lập trình nghe khi người dùng nhấp vào nút bỏ qua tuỳ chỉnh. Để bỏ qua quảng cáo, hãy gọi hàm adsManager.skip().

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

Đây là những thay đổi chính cần thiết để thiết lập SDK IMA với quảng cáo dạng âm thanh. Để được giải đáp về các vấn đề triển khai, hãy truy cập vào Diễn đàn kỹ thuật về SDK IMA.