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

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

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

เครื่องมือสร้างสำหรับ AdDisplayContainer ใช้อาร์กิวเมนต์ที่สองชื่อ 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