html5 - Google IMA SDK Overlay & Fullslot Ad Reference for JavaScript -
i'm using google ima html5 sdk api displaying fullslot ad in our self-made player.
now, i'm trying add overlay ad within same api, can't find documentation that. in faq link technical quick start guide, turns out made flash actionscript - need same guide html5/javascript.
how implement both, google overlay , fullslot ad html5/javascript?
update
this current javascript code 2 different ad requests (it returns empty ad overlay right now, doesn't work yet):
var google = google || { ima: 'blocked' }; //adblocker /* ################################################################# # # # required: google ima sdk html5 # # # ################################################################# */ 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 disabled moment avoid possible conflict 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()); // _.adsmanageroverlay.destroy(); }; //--------------------------------------------------------------- // : var onaderrorpostroll = function(aderrorevent) { //--------------------------------------------------------------- _.onerrorpostroll(); console.warn(aderrorevent.geterror()); // _.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 show ads. single video , overlay ads // start @ time; call ignored ad rules, ad rules // ads start when adsmanager 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; }());
fullslot ads rendered full-screen, skip button. sure want render overlay banner @ same time?
you need 2 adsmanager instances: 1 fullslot, , 1 overlay. @ desired time, send out 2 ad requests, render each in own adsmanager instance. theoretically render fullslot ad first, overlay can rendered on top of fullslot ad. however, take pinch of salt, because can messy multiple objects , multiple lifecycles. also, make sure clear policy team, because i'm not sure if overlaying ad policy-compliant.
Comments
Post a Comment