자바 스크립트 용 IMA SDK 오버레이 및 풀 슬롯 광고 참조

Question

이미 자체 제작자 플레이어에 풀 슬롯 광고를 표시하는 데 Google IMA HTML5 SDK API을 사용하고 있습니다.

이제 동일한 API 내에 오버레이 광고를 추가하려고하지만 문서를 찾을 수 없습니다. FAQ에는 technical quick start guide에 대한 링크가 있지만 Flash ActionScript 용으로 만들어졌지만 HTML5/JavaScript 용 가이드가 필요합니다.

Google 오버레이와 HTML5/JavaScript가있는 풀 슬롯 광고를 모두 구현하려면 어떻게해야합니까?

---

업데이트

이있는 두 개의 서로 다른 광고 요청에 대한 내 현재의 자바 스크립트 코드 (아직 작동하지 않습니다 그래서, 지금 항상 오버레이 빈 광고를 반환) :

var google = google || { 
 
    ima: 'blocked' 
 
}; //AdBlocker 
 
/* 
 
\t ################################################################# 
 
\t # \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t # 
 
\t # \t \t Required: Google IMA SDK for HTML5 \t \t \t \t \t \t # 
 
\t # \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t # 
 
\t ################################################################# 
 
*/ 
 

 

 
wct.videoads = (function() { 
 
    'use strict'; 
 

 
    //--------------------------------------------------------------- 
 
    // AdBlocker 
 
    //--------------------------------------------------------------- 
 
    if (google.ima == 'blocked') 
 
    return function() {}; 
 

 

 
    //--------------------------------------------------------------- 
 
    // $_ 
 
    //--------------------------------------------------------------- 
 
    var $_ = { 
 
    // (HTML5 Full-Slot Ads) 
 
    adTagPostroll: '[url removed]', 
 
    adTagOverlay: '[url removed]' 
 
    }; 
 

 

 
    //--------------------------------------------------------------- 
 
    // _ 
 
    //--------------------------------------------------------------- 
 
    var _ = { 
 
    adsManagerOverlay: { 
 
     destroy: function() {}, 
 
     resize: function() {} 
 
    }, 
 
    adsManagerPostRoll: { 
 
     destroy: function() {}, 
 
     resize: function() {} 
 
    }, 
 
    height: 0, 
 
    onError: function() {}, 
 
    width: 0 
 
    }; 
 

 

 
    //--------------------------------------------------------------- 
 
    // : 
 
    var createAds = function($container, width, height) { 
 
    //--------------------------------------------------------------- 
 
    _.height = height; 
 
    _.width = width; 
 

 

 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    // Init 
 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    google.ima.settings.setLocale(LANGUAGE.id); 
 
    var adDisplayContainer = new google.ima.AdDisplayContainer($container.get(0)); 
 
    adDisplayContainer.initialize(); 
 

 
    var adsLoaderPostRoll = new google.ima.AdsLoader(adDisplayContainer); 
 
    var adsLoaderOverlay = new google.ima.AdsLoader(adDisplayContainer); 
 

 
    var postRollRequest = new google.ima.AdsRequest(); 
 
    var overlayRequest = new google.ima.AdsRequest(); 
 

 
    postRollRequest.adTagUrl = $_.adTagPostroll; 
 
    postRollRequest.linearAdSlotWidth = width; 
 
    postRollRequest.linearAdSlotHeight = height; 
 
    postRollRequest.nonLinearAdSlotWidth = width; 
 
    postRollRequest.nonLinearAdSlotHeight = height; 
 
    postRollRequest.forceNonLinearFullSlot = true; 
 

 
    overlayRequest.adTagUrl = $_.adTagOverlay; 
 
    overlayRequest.linearAdSlotWidth = width; 
 
    overlayRequest.linearAdSlotHeight = height; 
 
    overlayRequest.nonLinearAdSlotWidth = width; 
 
    overlayRequest.nonLinearAdSlotHeight = height; 
 
    overlayRequest.forceNonLinearFullSlot = false; 
 

 

 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    // LOCAL Events 
 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    adsLoaderPostRoll.addEventListener(
 
     google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, 
 
     onAdsManagerPostRollLoaded, 
 
     false 
 
    ); 
 
    adsLoaderPostRoll.addEventListener(
 
     google.ima.AdErrorEvent.Type.AD_ERROR, 
 
     onAdErrorPostRoll, 
 
     false 
 
    ); 
 
    adsLoaderOverlay.addEventListener(
 
     google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, 
 
     onAdsManagerOverlayLoaded, 
 
     false 
 
    ); 
 
    adsLoaderOverlay.addEventListener(
 
     google.ima.AdErrorEvent.Type.AD_ERROR, 
 
     onAdErrorOverlay, 
 
     false 
 
    ); 
 

 

 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    // : 
 
    var startOverlay = function(options) { 
 
     //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
     var options = options || {}; 
 

 
     adsLoaderOverlay.contentComplete(); 
 
     adsLoaderOverlay.requestAds(overlayRequest); 
 

 
     _.onErrorOverlay = options.onEmpty || function() {}; 
 
    }; 
 

 

 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    // : 
 
    var startPostRoll = function(details) { 
 
     //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
     return;//postroll is disabled for the moment to avoid any possible conflict with the overlay 
 
     _.onContentPauseRequested = details.onAdStart; 
 
     _.onContentResumeRequested = details.onAdFinish; 
 

 
     adsLoaderPostRoll.requestAds(postRollRequest); 
 

 
     _.onErrorPostRoll = details.onEmpty || function() {}; 
 
    }; 
 

 

 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    // > 
 
    //¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬ 
 
    return { 
 
     startOverlay: startOverlay, 
 
     startPostRoll: startPostRoll, 
 
     resize: resize 
 
    }; 
 
    }; 
 

 
    //--------------------------------------------------------------- 
 
    // : 
 
    var onAdErrorOverlay = function(adErrorEvent) { 
 
    //--------------------------------------------------------------- 
 
    _.onErrorOverlay(); 
 
    console.warn(adErrorEvent.getError()); 
 
    // \t \t _.adsManagerOverlay.destroy(); 
 
    }; 
 

 
    //--------------------------------------------------------------- 
 
    // : 
 
    var onAdErrorPostRoll = function(adErrorEvent) { 
 
    //--------------------------------------------------------------- 
 
    _.onErrorPostRoll(); 
 
    console.warn(adErrorEvent.getError()); 
 
    // \t \t _.adsManagerPostRoll.destroy(); 
 
    }; 
 

 

 
    //--------------------------------------------------------------- 
 
    // : 
 
    var onAdsManagerOverlayLoaded = function(adsManagerLoadedEvent) { 
 
    //--------------------------------------------------------------- 
 
    console.debug('overlay ad loaded:'); 
 
    console.log(adsManagerLoadedEvent); 
 
    }; 
 

 
    //--------------------------------------------------------------- 
 
    // : 
 
    var onAdsManagerPostRollLoaded = function(adsManagerLoadedEvent) { 
 
    //--------------------------------------------------------------- 
 
    _.adsManagerPostRoll = adsManagerLoadedEvent.getAdsManager(document.createElement('video')); 
 
    _.adsManagerPostRoll.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, onAdError); 
 
    _.adsManagerPostRoll.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, _.onContentPauseRequested); 
 
    _.adsManagerPostRoll.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, _.onContentResumeRequested); 
 
    _.adsManagerPostRoll.addEventListener(google.ima.AdEvent.Type.LOADED, function(event) {}); 
 

 

 
    try { 
 
     _.adsManagerPostRoll.init(_.width, _.height, google.ima.ViewMode[$(document).fullScreen() ? 'FULLSCREEN' : 'NORMAL']); 
 

 
     // Call start to show ads. Single video and overlay ads will 
 
     // start at this time; this call will be ignored for ad rules, as ad rules 
 
     // ads start when the adsManager is initialized. 
 
     _.adsManagerPostRoll.start(); 
 

 
    } catch (adError) { 
 
     console.error(adError); 
 
    } 
 
    }; 
 

 
    //--------------------------------------------------------------- 
 
    // : 
 
    var resize = function(width, height) { 
 
    //--------------------------------------------------------------- 
 
    _.adsManagerPostRoll.resize(width, height, google.ima.ViewMode[$(document).fullScreen() ? 'FULLSCREEN' : 'NORMAL']); 
 
    }; 
 

 

 
    //--------------------------------------------------------------- 
 
    // > 
 
    //--------------------------------------------------------------- 
 
    return createAds; 
 
}());

Answer 1

솔루션 : http://chauduyphanvu1.com/IMA_FullSlot_Overlay/

대단히 감사합니다!

Answer 2

풀 슬롯 광고는 렌더링 전체 화면, 건너 뛰기 버튼. 같은 시간에 오버레이 배너를 렌더링 하시겠습니까?

두 개의 adsManager 인스턴스가 필요합니다. 하나는 풀 슬롯이고 다른 하나는 오버레이 인스턴스입니다. 원하는 시간에 두 개의 광고 요청을 보내고 각 광고 요청을 자체 adsManager 인스턴스에 렌더링합니다. 이론적으로 풀 슬롯 광고를 먼저 렌더링하므로 오버레이를 풀 슬롯 광고 위에 렌더링 할 수 있습니다. 그러나 여러 객체와 여러 라이프 사이클에서 지저분해질 수 있기 때문에 소금을 집어 넣으십시오. 또한 광고를 오버레이하는 것이 정책을 준수하는지 확신 할 수 없기 때문에 정책 팀에서 확인해야합니다. 감은 차우에 의해