오디오 광고

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 광고를 표시할 수 있습니다. 이러한 이유로 AdDisplayContainer 다음은 요소를 숨기는 방법의 예입니다.

style.css

.ad-container {
  display: none;
}

맞춤 컨트롤

AdDisplayContainer가 숨겨져 있으므로 이 문제를 해결하려면 맞춤 컨트롤이 필요합니다. 광고 시점 중에 재생됩니다. AdsManager에는 다음과 같은 맞춤형 컨트롤을 구현합니다.

건너뛸 수 있는 광고 처리

표시되는 AdDisplayContainer가 없기 때문에 IMA SDK가 광고 건너뛰기 버튼: 건너뛸 수 있는 광고를 처리하려면 다음 IMA를 구현합니다. 메서드:

아래 샘플 코드는 이 작업을 수행하는 방법을 보여줍니다.

ads.js

updateSkippable 함수를 설정하여 광고를 게재할지 여부와 시기를 결정할 수 있습니다. 건너뛸 수 있습니다. 이 함수는 각 AD_PROGRESS 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' 클래스를 사용해야 합니다. .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 기술 포럼에서 확인할 수 있습니다.