DFP creating your first ad tags

by John McGeechan

Google offer a splendid ad serving product called doubleclick for publishers (dfp) for most organizations it is completely free (as of July 2013, if your site served up to 90millions ads or less a month) . The following explains how to embed ad tags into your web site.

nb This article does not cover setting up ads on your dfp server, it is assumed that you are familiar with this process

The first thing your web page requires is a request for the dfp ad serving script...

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:') +
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);

This javascript enclosure pulls in the required google library for requesting and rendering the ads. This must be placed in the head section. The next step is to define the individual ad slots, this too must go in the head section.

<script type='text/javascript'>

googletag.cmd.push(function() { 
  leader = googletag.defineSlot('/9999999/leader', [728,90], 'leader').addService(googletag.pubads()); 
  footer = googletag.defineSlot('/9999999/footer', [728,90], 'footer').addService(googletag.pubads()); 
  sky1 = googletag.defineSlot('/9999999/sky1', [[120,600],[160,600]], 'sky1').addService(googletag.pubads()); 
  sky2 = googletag.defineSlot('/9999999/sky2', [[120,600],[160,600]], 'sky2').addService(googletag.pubads()); 
  mpu_article = googletag.defineSlot('/9999999/mpu_article', [[300,250],[250,250]], 'mpu_article').addService(googletag.pubads()); 
  mpu2_bottom_grid = googletag.defineSlot('/9999999/mpu2_bottom_grid', [[300,250],[250,250]], 'mpu2_bottom_grid').addService(googletag.pubads()); 
  mpu3_rh_column = googletag.defineSlot('/9999999/mpu3_rh_column', [[300,250],[250,250]], 'mpu3_rh_column').addService(googletag.pubads()); 



In the example above we are defining multiple ad slots, leaders, towers (sky) and mpus. The defineSlot function requires 3 arguments...

  • string unitName: Full path of the ad unit with the network code and unit name. The network code (9999999) is your dfp account and the unit name (leader) is the name of the unit allocated through the dfp system
  • number size: Width and height of the ad unit within brackets and separated by a comma. It is important if your have multiple ad sizes targetted to a unit in dfp, that you also provide all those sizes. For instance the sky1 unit has ad creatives of sizes 120x600 and 160x600 targetted to it on teh dfp server
  • string divId: Publisher-specified ID for the div element containing the ad.

The final step is to call in the ad in the web page itself, for example the leader....

<div id='leader style='width:100%; height:90px; text-align: center;'>

  <script type='text/javascript'>

   googletag.cmd.push(function() { googletag.display('leader'); });



This call pulls in the required ad and renders it in the page. note that google recommends that the scripts tags be placed in the target div, though I have had this working outside.


Google provide a wonderful troubleshooting tool for tracking down what went wrong with your ad tags. To use the tool ensure you are logged into dfp then open the page on your site that you are having problems with and add the following querystring.... http://yoursite.com?google_console=1. Once the page has loaded hit ctrl f10 for a diagnostics window. It includes a full log of all the define, create and render processes that occurred in the page as well as some really cool features such as the ad unit tab that allows you to look at the "delivery diagnostics" for an ad, so it can tell you which ad it chose as well as which ads it rejected and why. The console also provides error messages such as ad slots that were defined but then never displayed.