IMA HTML5 SDK는 동영상 광고와 유사한 설정으로 오디오 광고를 지원하지만 몇 가지 주요 차이점이 있습니다. 이 가이드에서 다루지 않는 IMA 설정 부분은 HTML5 시작 가이드를 참고하세요.
콘텐츠 재생에 <audio> 태그 사용
AdDisplayContainer 생성자는 IMA에서 콘텐츠 플레이어로 추적하는 videoElement라는 두 번째 인수를 사용합니다. 이 인수는 <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 이벤트에서 호출해야 합니다.
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 함수는 광고를 건너뛸 수 있는지, 현재 광고를 건너뛸 수 있는지, 광고를 건너뛸 수 있을 때까지 남은 시간을 기반으로 건너뛰기 버튼을 업데이트합니다. IMA에서 제공하지 않는 '.hidden' 클래스를 사용합니다. .hidden 클래스는 <button>에 display: none;를 추가합니다.
/**
* 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 기술 포럼을 참고하세요.