音訊廣告

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

即使沒有 AdDisplayContainer，IMA HTML5 SDK 仍需要 AdDisplayContainer 部分顯示廣告或內容。因此，我們建議您將 AdDisplayContainer。以下範例說明如何隱藏元素：

style.css

.ad-container {
  display: none;
}

自訂控制項

由於 AdDisplayContainer 已隱藏，因此需要自訂控制項來處理 在廣告時段中播放。AdsManager 的方法可用於 請實作這些自訂控制項：

• pause()
• resume()
• setVolume()

處理可略過的廣告

由於沒有可見的 AdDisplayContainer，IMA SDK 無法顯示 「略過廣告」按鈕。若要處理可略過廣告，請導入下列 IMA 方法：

• AdsManager.getAdSkippableState()
• AdEvent.getAdData()
• Ad.getSkipTimeOffset()

以下程式碼範例示範如何操作。

ads.js

您可以設定 updateSkippable 函式來判斷是否放送廣告，以及廣告的顯示時機 可以略過每個 AD_PROGRESS IMA 事件都應呼叫這個函式。 詳情請參閱 入門指南 ，瞭解如何設定 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 無法為音訊廣告提供略過按鈕。 開發人員必須為可略過的廣告新增自訂使用者介面，步驟如下： 簡單的 <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');
  }
}

最後，設定一個監聽器，用於使用者點擊自訂略過按鈕。如要略過廣告 呼叫 adsManager.skip()敬上 函式。

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

以下是設定 IMA SDK 與音訊廣告所需的主要變更。適用對象 有導入問題的解答，請前往 IMA SDK 技術論壇。