Google DFP tags on infinite scroll page

Question

I want to display ads in every page that is loaded via ajax on an infinite scroll, using Google DFP. I have four different slots in each page. I follow the regular Google DFP code, which is, in my case:

<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>

I then call the ads, again, regularly.

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

My infinite scroll script (Ajax Load More plugin for WordPress) offers me callback function that is dispatched after every successful query. I use this, for example, to AddThis, Facebook and Twitter button codes.

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

How can I make the DFP and this callback function to work together? I know about the Advanced Google Publisher Tag, but I'm not the most code savvy in the world, and I just couldn't adapt it to my needs (specially since I use a lot of slots). So, I thought this would be the easier way...

score 2 · Answer 1 · answered Jul 19 '16 at 16:17

The key to solve your problem it's use a new id (div-gpt-ad-randomNumber) for each slot and then use that id to the right element where you want to append the banner.

For each 'regular' load during the scroll you have to define the slots you need again with new random id's:

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

If it's not enough let me know and I will edit the post with a Fiddle with real example working.

Here is a Fiddle with an example: [FiddleJS](https://jsfiddle.net/oscardom/cog46j82/4/) It's a simple example with a button loading a new banner every time you click on it. Let me know if you need any explanation on the code. P.S.: Sorry for the inline JS on the Fiddle. I tried to put everything on the JS part but it was not working. Hopefully it's still useful for you. — OscarDOM, Aug 20 '16 at 10:31

Google DFP tags on infinite scroll page

1 Answers1