How to load DoubleClick for Publishers ads on pages with infinite contents

Almost any dynamic website split content into multiple pages. Some sites for this purpose provides paging controls and reload all page on each navigation made; some append a new content when a user scrolled to the bottom (infinite scroll). These pages are a very effective place for ads to increase your revenue. It’s easy to implement DoubleClick for Publishers (DFP) tags on each page when it loaded fully with site’s header and footer. But it’s not so easy to load ads for each page on infinite scroll website or website with other AJAX pagination implementation. In this case, you should understand few DFP special functions and use special ads loading technic.

There you can see the result which we will be realised at the end of the tutorial.

Prerequisites

A website with DFP asynchronous tags. You can load new ads from DFP on each AJAX request only with asynchronous tags. New ads requests are made with DFP function “googletag.pubads().refresh()” which not working with synchronous tags.
In this tutorial, it is assumed that reader has a prior knowledge of JavaScript, jQuery and PHP coding. You can realise dynamic ad loading with other programming languages when implementation methods are understood.
We assume that dynamic content loading is already implemented.

Update server response

First of all, you need to update your server response which returned when a new page of contents requested by AJAX.

Generate unique ID for new ad placement. With PHP you can make ID in this way:

$adId = 'ad-' . uniqid();

Update response with HTML element where generated ID used as a value for “id” attribute. Also for this HTML element attach “class” attribute with class name you will use later to select this element with jQuery. We will use “dfp-ad” as the class name in this tutorial.

Here are PHP code snippet (this will be different definitely in your situation):

$response .= '<div id="' . $adId . '" class="dfp-ad"></div>';

Now you done with changes in server side. In the result, requested page contents returned with the element for ad that consists of unique ID and class attributes.

Update JavaScript functions

You should get ad placement’s element with jQuery after an AJAX call and when you updated website with contents returned in response.

In our situation we use this jQuery code:

var $dfpAd = $('#items').children('.dfpAd:last');

Now most important part of this tutorial – update your JavaScript code/file with the new function:

function fillElementWithAd($el, slotCode, size, targeting) {
    if (typeof targeting === 'undefined') { 
        targeting = {}; 
    } else if ( Object.prototype.toString.call( targeting ) !== '[object Object]' ) { 
        targeting = {}; 
    }
    var elId = $el.attr('id'); 
    googletag.cmd.push(function() { 
        var slot = googletag.defineSlot(slotCode, size, elId); 
        for (var t in targeting) { 
            slot.setTargeting(t, targeting[t]); 
        }
        slot.addService(googletag.pubads());
        googletag.display(elId);
        googletag.pubads().refresh([slot]); 
    });
}

This function fills empty ad placement’s element with a banner from DFP ad server. This function accepts four arguments:

Object that targets ad placement’s element (jQuery object);
Name for DFP ad slot (string);
Ad size (array);
List of targetings to select specified ad from DFP (JavaScript object, optional)

Now call this function:

fillElementWithAd($dfpAd, '/00000000/ad_468x60px_1', [468, 60], {});

As a result, the empty element must be filled with a banner that corresponds to specified DFP slot code, size and targetings. Reload page and check result.