맞춤 광고 UI

이 가이드에서는 IMA SDK를 사용하여 나만의 맞춤 UI를 구현하는 방법을 보여줍니다. HTML5용입니다. 이렇게 하려면 기본 UI를 사용 중지하고 새 맞춤 UI를 만들고, 앱에서 얻은 광고 정보로 새 UI를 생성합니다. 이 가이드는 간단한 샘플 HTML5용입니다.

DOM에 UI 요소 추가

자바스크립트를 작성하기 전에 추가할 HTML 및 스타일시트를 수정합니다. 자세히 알아보기 버튼, 광고 건너뛰기 버튼, 그리고 카운트다운 타이머:

index.html

<div id="mainContainer">
  <div id="content">
    <video id="contentElement">
      <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
    </video>
  </div>
  <div id="adContainer"></div>
  <div id="customUi">
    <div id="adClick" class="customUIButton">Click me!</div>
    <div id="skipButton" class="customUIButton"></div>
    <div id="adCountdown"></div>
  </div>
</div>

Style.css

...
#customUI {
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
}

.customUIButton {
  position: absolute;
  right: 0px;
  background-color: red;
}

#adClick {
  top: 0px;
  width: 100px;
  height: 50px;
  line-height: 3em;
  cursor: pointer;
}

#skipButton {
  top: 213px;
  width: 150px;
  height: 35px;
  line-height: 2em;
  display: none;
}

#adCountdown {
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 120px;
  height: 20px;
  background-color: red;
}
...

원하는 경우 UI의 스타일을 다르게 지정할 수 있습니다. 위의 UI는 예로 들 수 있습니다

내장 UI 사용 중지

먼저 SDK에 내장 UI를 사용 중지하도록 알립니다.

ads.js

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.disableUi = true;
  // videoContent should be set to the content video element.
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoContent, adsRenderingSettings);
  ...
}

허용되는 경우 맞춤 UI 표시 및 숨기기

애드센스 광고와 같은 일부 Google 광고는 맞춤 UI를 허용하지 않으며, 대신 자체 UI를 렌더링할 수 있습니다. 맞춤 UI 위의 스타일시트에서 div는 다음과 같습니다. 기본적으로 숨겨져 있습니다. 현재 재생 중인 광고가 뒤따르는 광고가 다음과 같이 커스텀 UI를 허용합니다.

ads.js

let mainContainerDiv, currentAd, customUiDiv;
...
function setUpIMA() {
  customUiDiv = document.getElementById('customUi');
  mainContainerDiv = document.getElementById('mainContainer');
  mainContainerDiv.addEventListener('click', () => {
    // Need this to resume ads after clickthrough.
    adsManager.resume();
  });
  ...
}

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  ...
  adsManager.addEventListener(
      google.ima.AdEvent.Type.SKIPPED,
      onAdEvent);
}

function onAdEvent(adEvent) {
  switch(adEvent.type) {
    ...
    case google.ima.AdEvent.Type.STARTED:
      currentAd = adEvent.getAd();
      if (currentAd.isUiDisabled()) {
        showCustomUi();
      }
      break;
    case google.ima.AdEvent.Type.COMPLETE:
    case google.ima.AdEvent.Type.SKIPPED:
      hideCustomUi();
      break;
  }
}

function showCustomUi() {
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  customUiDiv.style.display = 'none';
}

자세히 알아보기 버튼에 로직 추가

연결해야 하는 첫 번째 UI 구성요소는 자세히 알아보기 버튼입니다. 이 요소 다음과 같이 클릭되면 SDK에 알립니다.

ads.js

let clickDiv;
...
function setUpIma() {
  ...
  clickDiv = document.getElementById('adClick');
  clickDiv.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    adsManager.clicked();
  });
  ...
}

카운트다운 타이머에 로직 추가

다음으로 남은 시간을 폴링하는 데 사용되는 카운트다운 타이머를 연결합니다. 있습니다.

ads.js

let countdownDiv, uiUpdateInterval;
...
function setUpIma() {
  ...
  countdownDiv = document.getElementById('adCountdown');
  ...
}

function showCustomUi() {
  uiUpdateInterval = setInterval(updateUi, 100);
  customUiDiv.style.display = 'block';
}

function hideCustomUi() {
  if (uiUpdateInterval) {
    clearInterval(uiUpdateInterval);
  }
  customUiDiv.style.display = 'none';
}

function updateUi() {
  updateCountdown();
}

function updateCountdown() {
  let countdownText = 'Ad ';
  const adPodInfo = currentAd.getAdPodInfo();
  const totalAds = adPodInfo.getTotalAds();
  if (totalAds > 1) {
    const position = adPodInfo.getAdPosition();
    countdownText += position + ' of ' + totalAds;
  }
  const remainingTime = Math.ceil(adsManager.getRemainingTime());
  countdownText +=  ' (' + remainingTime + 's)';
  countdownDiv.innerText = countdownText;
}

광고 건너뛰기 버튼에 로직 추가

마지막으로 광고 건너뛰기 버튼을 연결합니다. 이 버튼은 건너뛸 수 있는 광고와 카운트다운 타이머가 0에 도달해야 사용자가 광고를 건너뛸 수 있도록 합니다.

ads.js

let skipDiv;
// Set this infinitely high to fail early <=0 checks.
let timeTillSkip = Number.POSITIVE_INFINITY;
...
function setUpIma() {
  ...
  skipButton = document.getElementById('skipButton');
  skipButton.addEventListener('click', (e) => {
    // Prevent this from propagating to the customUi div. That would cause the ad to
    // resume immediately after the user clicks it, and we want it to pause.
    e.stopPropagation();
    if (timeTillSkip <= 0) {
      adsManager.skip();
    }
  });
  ...
}

function showCustomUi() {
  if (currentAd.isSkippable()) {
    skipButton.innerText = '';
    skipButton.style.display = 'block';
  } else {
    skipButton.style.display = 'none';
  }
  ...
}

function updateUi() {
  updateCountdown();
  if (currentAd.isSkippable()) {
    updateSkip();
  }
}

function updateSkip() {
  const currentTime = currentAd.getDuration() - adsManager.getRemainingTime();
  timeTillSkip = Math.ceil(currentAd.getSkipTimeOffset() - currentTime);
  if (timeTillSkip > 0) {
    skipButton.innerText = "Skip this ad in " + timeTillSkip + '...';
    skipButton.style.cursor = 'default';
   } else {
    skipButton.innerText = "Skip ad";
    skipButton.style.cursor = 'pointer';
  }
}

문제 해결

광고 UI를 사용 중지할 수 있도록 설정된 샘플 태그가 있나요?
이 URL을 복사할 수 있습니다. 샘플 태그 붙여넣기만 하면 됩니다
기본 UI를 사용 중지할 수 없습니다.
adsRenderingSettings.disableUi이(가) true(으)로 설정되었는지 확인합니다. 그런 다음 getAdsManager에 전달합니다. ad.isUiDisabled()을(를) 확인하세요. 은 true를 반환합니다. 또한 Ad Manager에서 네트워크를 사용 설정해야만 사용 중지할 수 있습니다. 있습니다. 사용 설정된 경우 VAST에 Extension가 포함되어 있습니다. 예를 들면 다음과 같습니다. 
<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>
 드림 그래도 문제가 해결되지 않으면 계정 관리자에게 문의하세요. 시작됩니다. 일부 광고 유형에는 특정 UI가 필요합니다. 이러한 광고는 <UiHideable> 값 0 이 경우 트래피킹팀은 이러한 광고 유형이 게재되지 않도록 변경해야 합니다