Google IMA SDKのオーバーレイ広告とフルスロット広告のJavaScriptリファレンス

Question

私たちは自作のプレーヤーでフルスロット広告を表示するのにすでにGoogle IMA HTML5 SDK APIを使用しています。

今、同じAPI内にオーバーレイ広告を追加しようとしていますが、そのドキュメントが見つかりません。 FAQにはtechnical quick start guideへのリンクがありますが、Flash ActionScript向けに作られていることが判明しましたが、HTML5/JavaScriptについては同じガイドが必要です。

GoogleオーバーレイとHTML5/JavaScriptによるフルスロット広告の両方を実装するにはどうすればよいですか？

---

更新

これは、二つの異なる広告リクエスト（それはまだ動作しませんので、それは、今常にオーバーレイの空の広告を返す）のための私の現在の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

フルスロット広告がレンダリングされます全画面表示、スキップボタン付き。オーバーレイバナーを同時にレンダリングしてもよろしいですか？

フルスロット用とオーバーレイ用の2つのadsManagerインスタンスが必要です。必要なときに、2つの広告リクエストを送信しますが、それぞれのadsManagerインスタンスでそれぞれをレンダリングします。理論的にはフルスロット広告を最初にレンダリングして、オーバーレイをフルスロット広告の上にレンダリングすることができます。しかし、複数のオブジェクトや複数のライフサイクルが混乱する可能性があるため、塩分の混入を避けてください。また、広告のオーバーレイがポリシーに準拠しているかどうかわからないため、ポリシーチームで確認してください。ヴチャウによって