我需要在 DFP 完成页面上所有广告的呈现之后触发一些 JavaScript - 或者至少在它触发 collapseEmptyDivs（隐藏包含没有订单项）。
是否有人知道让 DFP 在这些事件中的任何一个事件之后触发回调的方法？
【问题讨论】：
标签： javascript google-dfp
GPT API 现在有一个在每个插槽被填满后触发的回调。
例如：
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
console.log('Creative with id: ' + event.creativeId +
' is rendered to slot of size: ' + event.size[0] + 'x' + event.size[1]);
});
见https://developers.google.com/doubleclick-gpt/reference#googletag.events.SlotRenderEndedEvent
【讨论】：
我破解了 googletag 的 debug_log.log 函数并通过 jQuery 推送它来触发许多 DFP 操作的事件。 hack 确实需要 jQuery。
https://github.com/mcountis/dfp-events
【讨论】：
在页面部分加载脚本：
// set global variable if not already set
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
// load asynchronously the GPT JavaScript library used by DFP,
// using SSL/HTTPS if necessary
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' === document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
var node =document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
使用以下脚本初始化 google 发布者标签，最好在您页面的部分中：
// can be moved as well in the body
// if using async mode, wrap all the javascript into googletag.cmd.push!
googletag.cmd.push(function() {
// set page-level attributes for ad slots that serve AdSense
googletag.pubads().set("adsense_background_color", "FFFFFF");
googletag.pubads().setTargeting("topic","basketball");
// enables Single Request Architecture (SRA)
googletag.pubads().enableSingleRequest();
// Disable initial load, we will use refresh() to fetch ads.
// Calling this function means that display() calls just
// register the slot as ready, but do not fetch ads for it.
googletag.pubads().disableInitialLoad();
// Collapses empty div elements on a page when there is no ad content to display.
googletag.pubads().collapseEmptyDivs();
// Enables all GPT services that have been defined for ad slots on the page.
googletag.enableServices();
});
单独注册插槽（可以使用 foreach 循环生成）并渲染它们。事件侦听器也可以按插槽注册。 这里是重要的部分：确保一起刷新它们以避免在两个插槽上出现相同的广告（如果广告分配给两个插槽）=> googletag.pubads().refresh([slot1, slot2]]) ;
// this code can be moved externally to improve performance
googletag.cmd.push(function() {
// define slot1
slot1 = googletag.defineSlot(
"/1234/travel/asia/food",
[728, 90],
"banner1"
)
.addService(googletag.pubads())
.setTargeting(
"interests",
["sports", "music", "movies"]
);
// prerender the slot but don't display it because of disableInitialLoad()
googletag.display("banner1");
// define slot2
slot2 = googletag.defineSlot(
"/1234/travel/asia/food",
[[468, 60], [728, 90], [300, 250]],
"banner2"
)
.addService(googletag.pubads())
.setTargeting("gender", "male")
.setTargeting("age", "20-30");
// prerender the slot but don't display it because of disableInitialLoad()
googletag.display("banner2");
// add event to sign the slot as redered or not
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
if (event.slot === slot1 || event.slot === slot2) {
// do something related to the slot
}
});
// refresh all container ads and show them
// very important to call refresh with an array to avoid
// multiple callback to the registered event
googletag.pubads().refresh([slot1, slot2]);
});
<div id="banner1" style="width:300px; height:250px;"></div>
<div id="banner2" style="width:300px; height:250px;"></div>
广告呈现后，回调被触发。
有关更多信息，请查看此文件： https://github.com/davidecantoni/googletag
【讨论】：
我很确定 DFP 不会在广告呈现后提供回调。我已经使用以下代码来执行此操作。在发生以下情况之一后调用回调函数：
-广告已加载且 iframe 已呈现
-没有加载广告，广告单元被collapseEmptyDivs()隐藏
-已经过了一定时间（在本例中为 2 秒），但没有发生任何事情。 就像连接到 DFP 时出现某种网络错误一样。
adId 将是您的广告容器的 ID
假设你正在使用 jQuery
function callback() {
//your callback function - do something here
}
function getIframeHtml(iframe) {
if(iframe.contentWindow && iframe.contentWindow.document && iframe.contentWindow.document.body && iframe.contentWindow.document.body.innerHTML) {
return iframe.contentWindow.document.body.innerHTML;
}
return null;
}
var dfpNumChecks = 20;
var dfpCheckCount = 0;
var dfpCheckTimer = 100;
function dfpLoadCheck(adId) {
var nodes = document.getElementById(adId).childNodes;
if(nodes.length && nodes[0].nodeName.toLowerCase() == 'iframe' && getIframeHtml(nodes[0])) {
//the iframe for the ad has rendered
callback();
return;
} else if($('#' + adId).css('display') == 'none' || (dfpCheckCount >= dfpNumChecks)) {
//the ad unit has been hidden by collapseEmptyDivs()
callback();
return;
} else {
dfpCheckCount++;
setTimeout(function() { dfpLoadCheck(adId) }, dfpCheckTimer);
}
}
【讨论】：
查看我正在开发的 jQuery DFP 扩展...它仍在进行中，但提供了您所追求的回调。
this file 中有一个如何使用它的示例。
您将看到两个可用的回调函数...在每个广告加载后和所有广告加载后。广告单元容器元素上还设置了一个类，它可以是 display-none（未找到广告时）、display-block（找到广告时）或 display-original（未找到广告但容器 div 一开始就包含内容，我在需要时使用它来覆盖带有广告内容的网站的某些部分）。在回调中使用这些类当然很有用。
【讨论】：
如果您需要识别特定广告位的渲染结束（如果您对多个广告位使用相同的广告素材，这很有用），您可以执行以下操作
googleAd = googletag.defineSlot('/xxxxx/web_top_AAAxAAA', [xxx, xxx], 'div-id').addService(googletag.pubads());
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
if( event.slot.W == googleAd.W ){
// your code here
}
});
【讨论】：