javascript - 无限滚动页面上的 Google DFP 广告管理系统代码

Question

我想使用 Google DFP 广告管理系统在通过 ajax 加载的每个页面上以无限滚动方式显示广告。我在每个页面中有四个不同的插槽。我遵循常规的 Google DFP 代码，在我的例子中是:

<script type='text/javascript'>
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(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);
})();
</script>

<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/XXXXXXX/ROS_DHTML', [600, 600], 'div-gpt-ad-5').addService(googletag.pubads());
googletag.defineSlot('/XXXXXXX/ROS_Horizontal', [960, 250], 'div-gpt-ad-6').addService(googletag.pubads());
googletag.defineSlot('/XXXXXXX/ROS_Interstitial', [1920, 1080], 'div-gpt-ad-7').addService(googletag.pubads());
googletag.defineSlot('/XXXXXXX/ROS_Txt', [[300, 250], [300, 600]], 'div-gpt-ad-8').addService(googletag.pubads());
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
});
</script>

然后我再次定期调用广告。

<div id='div-gpt-ad-8'>
<script type='text/javascript'>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-8'); });
</script>
</div>

我的无限滚动脚本(Ajax Load More WordPress 插件)为我提供了在每次成功查询后调度的回调函数。例如，我将其用于 AddThis、Facebook 和 Twitter 按钮代码。

$(function() {
$.fn.almComplete = function(alm){
console.log("Ajax Load More Complete!");
};
})(jQuery);

如何使 DFP 广告管理系统和此回调函数协同工作？我知道Advanced Google Publisher Tag ，但我不是世界上最精通代码的人，我只是无法使其适应我的需求(特别是因为我使用了很多插槽)。所以，我认为这会是更简单的方法......

Answer 1

解决问题的关键是为每个插槽使用新的 id (div-gpt-ad-randomNumber)，然后使用该 id 到要附加横幅的正确元素。

对于滚动期间的每个“常规”加载，您必须使用新的随机 ID 再次定义所需的插槽:

function getRandomId() {
    return "ad-" + Date.now();
}

var ad1 = getRandomId(),
    ad2 = getRandomId(),
    ad3 = getRandomId();

googletag.cmd.push(function() {
    googletag.defineSlot('/XXXXXXX/ROS_DHTML', [600, 600], ad1).addService(googletag.pubads());
    googletag.defineSlot('/XXXXXXX/ROS_Horizontal', [960, 250], ad2).addService(googletag.pubads());
    googletag.defineSlot('/XXXXXXX/ROS_Interstitial', [1920, 1080], getRandomId()).addService(googletag.pubads());
    googletag.defineSlot('/XXXXXXX/ROS_Txt', [[300, 250], [300, 600]], ad3).addService(googletag.pubads());
    googletag.pubads().collapseEmptyDivs();
    googletag.enableServices();
});

//You can do a cleaner version with a loop but I think this example it's better to understand the idea

<小时/>

var adContainer = document.createElement("div");
div.id = ad1;
document.body.appendChild(adContainer); // Append it where you need
googletag.cmd.push(function() { googletag.display(ad1);});

//Repeat it for ad2 and ad3

<小时/>

如果这还不够，请告诉我，我将使用 fiddle 编辑帖子并提供真实的示例。