How to refresh Google DFP ads

Refreshing ads as part of an ajax interface can be a pain, many ad providers do not support this feature out of the box. DFP does however which is yet another awesome feature of the DFP platform.

If you want some help with setting up DFP ads on your site, please refer my post How to setup Google DFP ads on your site I have also written articles about setting up DFP targeting parameters and How to debug DFP ads.

How to refresh ads

Google’s GPT library provides a handy refresh function that will refresh all DFP ad slots on a page, the refresh function is part of the pubService class and can be called like so:

googletag.cmd.push(function() {
    googletag.pubads().refresh();
});

The refresh call will force all ads on the page to refresh, you should see the ads change to a different creative.

Debugging the ad calls

You can check the calls to the ad server in your browsers console (such as firebug or chrome’s built in one) to ensure that a refresh has definitely taken place.

Ads are pulled into the page by requests to ‘pubads.g.doubleclick.net’. If you open the console, head to the network tab and filter by JavaScript you should see a call to this domain when the page is loaded and whenever the ads are refreshed.

The console can also be useful for debugging the ad calls, you can check what parameters were sent to the ad server and the response that the ad server sent back. You may need to pop the response into a JS beautifier in order to make sense of it.

Refreshing specific ads

By default the call to refresh will target all the ad slots on a page, it is also possible to specify exactly which slots you want to be refreshed.

In order to do this you simply pass an array of ad slots into the refresh function, you will of course need a reference to each ad slot in order to do this, each call to ‘googletag.defineSlot’ returns a reference to the ad that was just instantiated, if you save all of these return values into variables you will be able to construct a list of ad slots that you want to refresh.

Here is a simple example of this:


<script type='text/javascript'>
var slots = {};
googletag.cmd.push(function() {
    slots['sky'] = googletag.defineSlot('{account_id}/{path}', [120, 600], 'ad-sky').addService(googletag.pubads());
    slots['mpu'] = googletag.defineSlot('{account_id}/{path}', [300, 250], 'ad-mpu').addService(googletag.pubads());
    slots['leader'] = googletag.defineSlot('{account_id}/{path}', [728, 90], 'ad-leader').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
});

refreshAds = function(refresh_slots) {
    if(typeof(refresh_slots) == "undefined") {
        googletag.pubads().refresh();
    } else {
        googletag.pubads().refresh(refresh_slots);
    }
};

</script>
<div>
    <button onclick="javascript:refreshAds(); return false;">Refresh All</button>
    <button onclick="javascript:refreshAds([slots['sky']]); return false;">Refresh Sky</button>
    <button onclick="javascript:refreshAds([slots['mpu']]); return false;">Refresh MPU</button>
    <button onclick="javascript:refreshAds([slots['leader']]); return false;">Refresh Leader</button>
    <button onclick="javascript:refreshAds([slots['sky'], slots['mpu']]); return false;">Refresh Sky + MPU</button>
</div>
<div id='ad-sky' class="ad">
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('ad-sky'); });
    </script>
</div>
<div id='ad-mpu' class="ad">
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('ad-mpu'); });
    </script>
</div>
<div id='ad-leader' class="ad">
    <script type='text/javascript'>
    googletag.cmd.push(function() { googletag.display('ad-leader'); });
    </script>
</div>

Note that each ad slot is saved into an object (called slots) for later retrieval.