광고 재생목록 자동화

IMA HTML5 SDK는 완전 자동화된 광고 재생목록을 지원합니다. 이 기능은 광고를 트래피킹할 때 Google Ad Manager에 지정된 대로 콘텐츠에 광고 시점을 삽입합니다. 또한 프리롤, 미드롤, 포스트롤을 비롯한 광고 시점을 지원하는 데 필요한 동영상 플레이어 코드를 크게 간소화합니다.

  • AdsManager를 만들 때 getAdsManager 호출을 사용하여 contentPlayback 객체가 전달됩니다. 이 객체에는 동영상의 현재 재생 헤드 위치를 반환하는 currentTime 속성이 있어야 합니다. HTML5 video 요소를 사용하여 콘텐츠를 표시하는 경우 해당 요소를 SDK에 전달하기만 하면 됩니다. 이 객체는 콘텐츠 재생 진행률을 추적하여 Ad Manager에 지정된 시간에 광고 시점이 자동으로 삽입되도록 하는 데 사용됩니다. 또한 SDK가 개발자를 대신하여 콘텐츠 상태를 처리하도록 하려면 SDK에 이를 알려야 합니다. 
    var adsRenderingSettings = new google.ima.AdsRenderingSettings();
adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
adsManager = adsManagerLoadedEvent.getAdsManager(
    videoContent, adsRenderingSettings); // See API reference for contentPlayback.
  • 포스트롤이 재생되도록 하려면 콘텐츠가 완료되었음을 SDK에 알려야 합니다. SDK가 동영상 플레이어를 사용하여 광고를 재생하는 경우도 있으므로 이 작업은 약간 까다롭습니다. 따라서 광고가 종료된 것이 아니라 콘텐츠가 종료되었을 때만 SDK에 알리도록 해야 합니다. 다음 코드를 사용하여 할 수 있습니다. 
    var videoContent = document.getElementById('contentElement');
var contentEndedListener = function() {adsLoader.contentComplete();};

videoContent.addEventListener('ended', contentEndedListener);

function onContentPauseRequested() {
  contentElement.removeEventListener('ended', contentEndedListener);
  ...
}

function onContentResumeRequested() {
  contentElement.addEventListener('ended', contentEndedListener);
  ...
}
  • CONTENT_PAUSE_REQUESTED 및 CONTENT_RESUME_REQUESTED 이벤트는 광고 시점이 재생될 때 콘텐츠를 일시중지하고 재개하는 데 사용됩니다.
  • 동영상 플레이어가 드래그 투 탐색을 지원하고 사용자가 드래그하는 동안 동영상 플레이어의 현재 시간 속성이 업데이트되면 SDK는 정상적으로 진행되는 콘텐츠와 사용자가 콘텐츠를 탐색하는 것을 구분할 수 없습니다. 맞춤 contentPlayback 객체를 getAdsManager의 매개변수로 사용해야 합니다. 이 사용 사례의 예는 탐색 관련 문제를 참고하세요.

참고: 콘텐츠 재생이 완료되었거나 사용자가 재생을 중지한 경우 SDK에 콘텐츠가 완료되었음을 알리기 위해 AdsLoader.contentComplete를 호출해야 합니다. 그러면 SDK는 포스트롤 광고 시점(예약된 경우)을 재생합니다. ALL_ADS_COMPLETED 이벤트는 모든 광고 시점이 재생될 때 발생합니다. 또한 init()가 호출될 때 콘텐츠 추적이 시작되며 콘텐츠를 재생하기 전에 항상 init()를 호출해야 합니다.

광고 시점의 자동 재생 사용 중지

경우에 따라 준비가 될 때까지 SDK가 광고 시점을 재생하지 못하도록 할 수 있습니다. 이 시나리오에서는 광고 시점의 자동 재생을 사용 중지하고 광고 시점 재생 준비가 되면 SDK에 알릴 수 있습니다. 이 구성을 사용하면 SDK가 광고 시점을 로드하면 AD_BREAK_READY 이벤트가 실행됩니다. 플레이어에서 광고 시점이 시작될 준비가 되면 adsManager.start()를 호출할 수 있습니다.

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

사용해 보기

작동하는 구현은 다음 코드를 참고하세요.

구하는 데 어려움

광고 규칙을 사용하는 경우 클릭 및 드래그 탐색에 문제가 발생할 수 있습니다. 특히 사용자가 클릭하고 드래그하여 동영상에서 여러 미드롤 광고 모음을 지나간 후 콘텐츠가 재개되기 전에 이러한 광고 모음이 2개 이상 연속으로 재생될 수 있습니다. 이는 사용자가 탐색하는 동안 동영상 재생 헤드 시간이 업데이트되기 때문에 발생합니다. 사용자가 광고를 지나 탐색하는 동안 SDK가 현재 시간을 폴링하면 광고를 재생해야 한다고 생각할 수 있습니다. 콘텐츠가 재개되면 해당 광고가 재생된 후 탐색 이후의 가장 최근 광고가 재생됩니다. 이 문제를 시각적으로 표현한 다이어그램은 다음을 참고하세요.

사용자가 탐색을 시작할 때 현재 시간을 저장하고 사용자가 일반 재생을 재개할 때까지 SDK에서 요청할 때 해당 시간을 보고합니다. 이 솔루션의 시각적 표현은 다음 다이어그램을 참고하세요.

이 솔루션을 사용하면 0:10 미드롤을 제대로 건너뛰고 0:20 미드롤만 재생할 수 있습니다. 다음 코드 스니펫에서 맞춤 재생 헤드 추적기를 사용하여 이 작업을 실행합니다. 이 코드에는 다운로드 페이지에서 제공되는 고급 HTML5 샘플의 ads.js 수정사항 (굵게 표시됨)이 포함되어 있습니다.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

모바일 Safari의 알려진 문제

이 방법은 모바일 Safari를 제외한 모든 플랫폼에서 작동합니다. 모바일 Safari에서는 동영상 태그의 탐색 속성이 올바르게 구현되지 않습니다 (항상 false를 반환함). 이 문제를 해결하려면 사용자가 동영상을 탐색하는지 직접 확인해야 합니다. 이 메서드의 샘플 코드는 다음과 같습니다. 강조 표시된 줄은 기존 코드의 수정사항입니다.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

이렇게 변경하면 SDK는 콘텐츠 동영상 플레이어의 currentTime 속성이 아닌 Ads 객체의 currentTime 속성을 사용하여 광고 시점을 결정합니다.