Quảng cáo audio

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

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

Hàm khởi tạo cho AdDisplayContainer lấy một đối số thứ hai có tên là videoElement mà IMA theo dõi dưới dạng nội dung trình phát. Đối số này chấp nhận cả thẻ <video> hoặc <audio>. Đối với âm thanh nội dung và quảng cáo, hướng dẫn này khuyên bạn nên sử dụng thẻ <audio> để tạo một AdDisplayContainer Nếu có nội dung video, bạn có thể sử dụng thẻ <video> cho 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ị đối với quảng cáo hoặc nội dung. Vì lý do này, chúng tôi khuyên bạn nên ẩn AdDisplayContainer. Dưới đây là ví dụ về cách bạn có thể ẩn phần tử:

style.css

.ad-container {
  display: none;
}

Chế độ điều khiển tuỳ chỉnh

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

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

Vì không có AdDisplayContainer 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 IMA sau phương thức:

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 một quảng cáo có hay không và thời điểm quảng cáo có thể bỏ qua. Hàm này phải được gọi trên mỗi sự kiện IMA AD_PROGRESS. 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. Việc này có thể thực hiện 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 quảng cáo có thể bỏ qua hay không, 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. Công cụ này tận dụng '.hidden' mà không do IMA cung cấp. Lớp .hidden sẽ thêm display: none; đến <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 cho các lượt nhấp của người dùng vào nút tuỳ chỉnh bỏ qua. Cách bỏ qua quảng cáo: gọi adsManager.skip() .

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

Sau đâ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. Cho câu trả lời cho các vấn đề về triển khai, hãy truy cập vào Diễn đàn kỹ thuật SDK IMA.