Google IMA SDK Overlay & Fullslot Ссылка для объявлений для JavaScript

Question

Я уже использую Google IMA HTML5 SDK API для отображения объявления полнотекстового объявления в нашем самодельном проигрывателе.

Теперь я пытаюсь добавить оверлейное объявление в пределах одного API, но я не могу найти документацию для этого. В FAQ есть ссылка на technical quick start guide, но оказывается, что он создан для Flash ActionScript, но мне нужен тот же самый указатель для HTML5/JavaScript.

Как реализовать как Google overlay, так и полнотекстовое объявление с HTML5/JavaScript?

---

Update

Это мой текущий код 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

Решение по Vu Chau: http://chauduyphanvu1.com/IMA_FullSlot_Overlay/

Большое спасибо!

Answer 2

объявления занимающего все оказанные полноэкранный режим, с кнопкой пропуска. Вы уверены, что хотите одновременно отображать оверлейный баннер?

Вам понадобится два экземпляра adsManager: один для вашего полноцветного и один для наложения. В желаемое время отправьте два запроса объявлений, но сделайте их в своем собственном экземпляре adsManager. Теоретически вы сначала должны сделать объявление fullslot, чтобы оверлей можно было отобразить поверх объявления полнотекста. Однако, возьмите это с щепоткой соли, потому что это может быть беспорядочно с несколькими объектами и несколькими жизненными циклами. Кроме того, убедитесь, что вы очистили это с помощью команды Policy, потому что я не уверен, что наложение объявлений соответствует требованиям политики.