โฆษณาแบบเสียง

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

การใช้แท็ก <audio> สำหรับการเล่นเนื้อหา

ตัวสร้างสำหรับ AdDisplayContainer ใช้อาร์กิวเมนต์ที่ 2 ชื่อ videoElement ซึ่ง IMA ติดตามเป็นโปรแกรมเล่นเนื้อหา อาร์กิวเมนต์นี้ยอมรับทั้งแท็ก <video> หรือ <audio> สำหรับเนื้อหาเสียงและโฆษณา คู่มือนี้แนะนำให้ใช้แท็ก <audio> เพื่อสร้าง AdDisplayContainer หากมีเนื้อหาวิดีโอ คุณสามารถใช้แท็ก <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);

การซ่อน AdDisplayContainer

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

style.css

.ad-container {
  display: none;
}

การควบคุมที่กำหนดเอง

เนื่องจาก AdDisplayContainer ซ่อนอยู่ คุณจึงต้องใช้การควบคุมที่กำหนดเองเพื่อจัดการการเล่นระหว่างช่วงพักโฆษณา AdsManager มีเมธอดที่สามารถใช้ กับการควบคุมที่กำหนดเองเหล่านี้

การจัดการโฆษณาที่ข้ามได้

เนื่องจากไม่มี AdDisplayContainer ที่มองเห็นได้ IMA SDK แสดงปุ่มข้ามโฆษณาไม่ได้ ในการจัดการโฆษณาที่ข้ามได้ ให้ใช้เมธอด IMA ต่อไปนี้

โค้ดตัวอย่างด้านล่างแสดงวิธีดำเนินการ

ads.js

คุณตั้งค่าฟังก์ชัน updateSkippable เพื่อระบุว่าจะข้ามโฆษณาได้หรือไม่และเมื่อใด ควรเรียกใช้ฟังก์ชันนี้ในเหตุการณ์ IMA AD_PROGRESS แต่ละเหตุการณ์ ดูคู่มือเริ่มต้นใช้งานเพื่อดูคำแนะนำเกี่ยวกับวิธีตั้งค่า Listener สำหรับเหตุการณ์ 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);
  }

IMA ไม่สามารถเปลี่ยนปุ่มข้ามสำหรับโฆษณาเสียงได้ ซึ่งต่างจากโฆษณาวิดีโอ นักพัฒนาแอปต้องเพิ่ม UI ที่กำหนดเองสำหรับโฆษณาที่ข้ามได้ ซึ่งทำได้โดยใช้แท็ก <button> ง่ายๆ ฟังก์ชัน updateSkipUI นี้จะอัปเดตปุ่มข้ามโดยอิงตามว่าโฆษณาเป็นแบบข้ามได้หรือไม่ โฆษณาเป็นแบบข้ามได้ในปัจจุบันหรือไม่ และเหลือเวลาอีกเท่าใดก่อนที่โฆษณาจะข้ามได้ ไลบรารีนี้ใช้คลาส '.hidden' ซึ่ง IMA ไม่ได้ให้บริการ คลาส .hidden จะเพิ่ม display: none; ไปยัง <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');
  }
}

สุดท้าย ให้ตั้งค่า Listener เพื่อให้ผู้ใช้คลิกปุ่มข้ามที่กำหนดเอง หากต้องการข้ามโฆษณา ให้เรียกใช้ฟังก์ชัน adsManager.skip()

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

การเปลี่ยนแปลงหลักเหล่านี้จำเป็นต้องทำในการตั้งค่า IMA SDK ด้วยโฆษณาเสียง หากต้องการหาคำตอบสำหรับคำถามเกี่ยวกับการใช้งาน โปรดไปที่ฟอรัมทางเทคนิคของ IMA SDK