How to setup Google DFP ads on your site

Google’s DFP ad platform is all kinds of awesome. It allows for easy targeting of each part of a site and even more awesomely the ads can be loaded asynchronously in iframes right out of the box, so no more horrible document.write page blocking ads, sweet!

Please see my post How to refresh Google DFP ads if you need to refresh ads for ajax sections of your site, I have also written articles on setting up DFP targeting parameters and How to debug DFP ads.

Getting started

The DFP management console has a handy feature for generating the html and javascript snippets required to render ad units, the snippets will look something like this:


<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('/{account_id}/{path}', {sizes}, {div_id}).addService(googletag.pubads());
        googletag.pubads().enableSingleRequest();
        googletag.enableServices();
    });
</script>

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

The first JavaScript snippet will be the same across your site, it simply loads the DFP JavaScript library.

The second snippet sets up the ad slots that are on the current page, there will be a defineSlot call for each ad unit that is to be rendered. Note the {div_id} placeholder is used to reference the actual element that will contain the ad, this can actually be anything you like, so you could set this to ‘leaderboard’ for instance.

The third snippet, which is a div with some javascript inside it, defines the html element that will contain the ad, it should have a matching defineSlot call (from the second snippet) with the same id. Inside the div is a piece of javascript that actual triggers the rendering of the ad, again it should contain the id of the element that will contain the ad.

Generate ad unit paths automatically

The path section relates to the particular ad unit that you are trying to render, which are setup in DFP’s management console, these ad units can be nested, so you might have a structure like this:

Home (path: home)
News (path: news)
    Politics (path: news/politics)
    Science (path: news/science)
    World (path: news/world)
Weather (path: weather)
    UK (path: weather/uk)
        London (path: weather/uk/london)
    USA (path: usa)

The usual method is to generate ad units that match the structure of your site, then using the DFP console you can generate snippets for each of these ad units and place the code in the relevant pages of your site.

This can get tedious however, hard coding lots of javascript snippets into your site will not only take time but will need to be maintained.

A better way of handling ad units would be to automatically generate the ad unit path based on the location of the current page. For instance (using the example above), if the user is viewing an article within the World section you could create a function that sets the ad unit path to news/world and inserts this into each defineSlot call. The function would operate in a similar fashion to the generation of a breadcrumb trail.

Using this method of auto generated ad unit paths will allow much easier maintenance of the various ad units on your site. If an ad unit path does not exist then DFP will simply serve up ads from the next available parent ad unit, so if a path doesn’t exist you will always see an ad, any ad paths that don’t exist will become suggested ad units within DFP’s admin system and can be easily created.

The Google Debug Console is your friend

One feature that isn’t mentioned enough in Google’s DFP documentation is the debug console. This is a console that can be used on any page that contains DFP ads, it will provide debugging information on the ad units that are on the page.

To enable the console, add a query parameter of ‘google_console’ to the URL, here is the console on the Metro’s website. With the console enabled, press ctrl+f10 to actually bring it up. Within the console you will see information on each ad slot on the page, the console will also show any errors that have occurred and can be useful in diagnosing issues.