适用于 JavaScript 的 Google IMA SDK 叠加层和全槽广告参考
Posted
技术标签:
【中文标题】适用于 JavaScript 的 Google IMA SDK 叠加层和全槽广告参考【英文标题】:Google IMA SDK Overlay & Fullslot Ad Reference for JavaScript 【发布时间】:2017-03-21 22:10:05 【问题描述】:我已经在使用Google IMA html5 SDK API 在我们自制的播放器中显示全幅广告。
现在,我尝试在同一个 API 中添加重叠式广告,但我找不到相关文档。在FAQ 中是指向technical quick start guide 的链接,但事实证明它是为 Flash ActionScript 制作的 - 但我需要相同的 HTML5/javascript 指南。
如何使用 HTML5/JavaScript 实现 Google 重叠式广告和全幅广告?
更新
这是我当前用于两个不同广告请求的 JavaScript 代码(它现在总是为叠加层返回一个空广告,因此它还不起作用):
var google = google ||
ima: 'blocked'
; //AdBlocker
/*
#################################################################
# #
# Required: Google IMA SDK for 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 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());
// _.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 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;
());
【问题讨论】:
重叠式广告类型也称为非线性广告类型(在视频播放期间显示) 重叠式广告和全幅广告当然不会同时显示。 【参考方案1】:全幅广告以全屏形式呈现,并带有一个跳过按钮。确定要同时渲染覆盖横幅吗?
您需要两个 adsManager 实例:一个用于全槽,一个用于叠加。在所需时间,发送两个广告请求,但在其自己的 adsManager 实例中呈现每个广告请求。从理论上讲,您应该首先呈现全幅广告,以便叠加层可以呈现在全幅广告之上。但是,请稍加注意,因为它可能会因多个对象和多个生命周期而变得混乱。另外,请务必向政策团队明确这一点,因为我不确定叠加广告是否符合政策。
【讨论】:
你当然是对的,它们不是同时显示的。 我复制了现在以google.img.AdsLoader
开头的所有内容。但是,即使 VAST 网址 (pubads.g.doubleclick.net/gampad/…) 已经过测试并且应该投放广告,我总是会收到广告为空的消息。我更新了我的问题,向您展示了我目前使用哪种 JavaScript 来创建两个广告请求。
如果服务器返回空的 VAST,那是因为它认为广告请求是重复的。在发出新的广告请求之前,请确保销毁您各自的 adsManager 实例并在您的 adsLoader 上调用 contentComplete
。这样做会重置 SDK,并使您的广告请求在服务器看来是合法的。
谢谢。然而,调用contentComplete
并没有改变任何东西。无论如何,叠加层是第一个调用的广告,全尺寸是后贴片(仍然可以正常工作),然后被调用。但是,出于测试目的,我什至禁用了后贴全尺寸广告,也没有改变任何东西。顺便说一句,我认为contentComplete
仅用于后贴片广告“这将允许 SDK 播放后贴片广告。” - 我现在插入了我用来管理两者的完整 JavaScript 代码广告进入我的问题,你能快速看一下吗?
如果你仍然有兴趣在这里帮助我,今天是你获得赏金的最后机会以上是关于适用于 JavaScript 的 Google IMA SDK 叠加层和全槽广告参考的主要内容,如果未能解决你的问题,请参考以下文章
swift Zero to App:使用Firebase进行开发(适用于iOS - Google I / O 2016)
Parse.com 推送通知 VS。适用于 iOS 的 Google Cloud 消息传递?
是否有适用于所有内容的通用OpenId Connect客户端库?
使用适用于 iOS 的 Google Vision API 添加 2D 或 3D 人脸过滤器,例如 MSQRD/SnapChat