IMA HTML5 SDK는 완전히 자동화된 광고 재생목록을 지원합니다. 이 기능 에 지정된 대로 콘텐츠에 광고 시점을 삽입합니다. Google Ad Manager 확인하시기 바랍니다. 또한 동영상 플레이어 코드가 크게 간소화됩니다. 광고 시간을 지원하는 데 필요합니다.
AdsManager
를 만들 때contentPlayback
개체가 getAdsManager를 통해 전달됩니다. 있습니다. 이 객체는 현재 플레이헤드를 반환하는currentTime
속성이 있음 위치를 지정할 수 있습니다. HTML5video
요소를 사용하여 표시할 때 이 요소를 SDK에 전달하기만 하면 됩니다. 이 객체 광고 시점이 콘텐츠 재생의 진행 상황을 추적하는 데 사용되므로 Ad Manager에서 지정한 시간에 자동으로 삽입됩니다. 또한 사용자가 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
의 매개변수로 사용해야 합니다. 이러한 사용 사례의 예는 찾기 관련 문제를 참조하세요.
참고: 콘텐츠 재생이 완료되었거나
사용자가 재생을 중지한 경우 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(); }
사용해 보기
아래에서 실제 구현을 확인할 수 있습니다.
<ph type="x-smartling-placeholder">탐색의 문제
광고 규칙을 사용하면 클릭 앤 드래그 탐색에 문제가 발생할 수 있습니다. 특히 사용자가 여러 개의 곳을 클릭하여 동영상을 탐색한 후 2개 이상의 광고 모음이 이전에 연달아 재생되어 콘텐츠를 재개합니다. 이는 사용자가 찾고 있습니다. 사용자가 광고를 보는 동안 SDK가 현재 시간을 폴링하는 경우 광고를 지나쳐야 하는 경우 광고가 재생되어야 한다고 생각할 수 있습니다. 콘텐츠가 다시 시작하고 해당 광고를 재생한 다음 탐색 후 가장 최근 광고를 재생합니다. 아래 다이어그램을 참조하세요.
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_issue.jpg?authuser=5&hl=ko)
이 문제를 해결하는 간단한 방법은 사용자가 시작할 때 현재 시간을 저장하는 것입니다. 사용자가 SDK에서 요청하는 시간을 사용자가 재생이 재개됩니다. 이 솔루션을 시각적으로 표현하려면 아래 다이어그램:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/interactive-media-ads/images/seeking_fix.jpg?authuser=5&hl=ko)
이 방법을 사용하면 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에서 Ads
의 currentTime 속성을 사용합니다.
광고 시점을 재생할지 결정하는 객체(currentTime
속성이 아닌
동영상 플레이어입니다.