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

IMA HTML5 SDK รองรับโฆษณาเสียงที่มีการตั้งค่าคล้ายกับโฆษณาวิดีโอ แต่มีข้อแตกต่างสำคัญ 2-3 ข้อ หากต้องการดูการตั้งค่า 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 เพื่อกำหนดว่าจะข้ามโฆษณาได้หรือไม่และเมื่อใด ฟังก์ชันนี้ควรเรียกใช้ในแต่ละเหตุการณ์ AD_PROGRESS IMA ดูวิธีตั้งค่า 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/interface/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