Google覆盖&用于JavaScript的满时隙广告参考
Google覆盖&用于JavaScript的满时隙广告参考
提问于 2016-11-08 10:15:23
我已经用Google HTML5 SDK API在我们自制的播放器中显示了一个完整的广告。
现在，我试图在同一个API中添加一个覆盖广告，但是我找不到相应的文档。在常见问题中有一个指向技术快速启动指南的链接，但事实证明它是为Flash制作的--但我需要HTML5 5/JavaScript的相同指南。
如何实现两者，使用HTML5 5/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
Stack Overflow用户
发布于 2016-11-12 16:02:05
满槽广告呈现全屏，有一个跳过按钮.您确定要同时呈现覆盖横幅吗？
您需要两个adsManager实例:一个用于满槽，另一个用于覆盖。在所需的时间，发送两个广告请求，但在自己的adsManager实例中呈现每个广告请求。理论上，您将首先呈现满槽广告，以便覆盖可以呈现在满槽广告的顶部。然而，就拿一点盐来说吧，因为它可能会有多个对象和多个生命周期的混乱。另外，请确保您在策略团队中明确了这一点，因为我不确定是否覆盖广告是否符合策略。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40484274
复制相关文章
相似问题
腾讯云开发者
