1. Introduction
  2. Generate your tags
  3. Tagging your page
  4. More on GAM tags
  5. More on GPT tags
  6. Even More on GAM tags
  7. For now
  8. Next

Introduction

Alright, we've set up the Ad Units and Ad Placements. Next thing we need to do is tag your pages so that it can run DFP SB. This process is pretty simple overall.

Generate Tags

Back in the DFP SB control panel, on the Inventory tab click "Generate Tags" on the left hand menu.

This page generates the basic code you need to insert into your webpage to get DFP running. As you can see, our Ad Unit is listed there! Click "add" on our Ad Placement and then "Generate tags" at the bottom.

If you created multiple Ad Units, feel free to select all the relevant units you want tags for.

DFP has multiple types of tags you can use including the old GAM tags (this may not be available to new users). I recommend that you select the GPT tags. GPT Async allows you to load ads asynchronously (ad does not delay the page from loading). Please do note that GPT Async loads ads in iFrames which may break certain types of ads (eg, sitewraps) if they are not coded correctly.

GPT Sync and GAM tags are functionally the same. These tags will delay the page when loading and it will load the ads sequentially.

GPT tags offer several new features including Single Request Mode. Single Request mode means that DFP will determine (decide) what Line Item to deliver at once instead of determing it for each Ad Unit as it loads. This is great when you want to set up Roadblocks.

As you can see, Google tries to make this easy for you. The first box, "Document header", has pseudo code which resembles what your basic head information of your webpage looks like. This is because this code should be placed as high up on the page as possible and there's no place higher than in the head code. For all intents and purposes, this code can show up anywhere as long as it shows up before the code in the box below it.

The second box, "Document body", is the code where you want the ad to show up. Let's put in our webpage!

Tagging your page

Here is the source of our webpage. Pretty simple.

We'll now add the "Document Header" code in our head area like so.

And since we want our Leaderboard Ad to show up between the title of the page and the first paragraph, we'll place the "Document body" code right between there.

And we're done! That's all you need to do to tag your pages.

If you have more Ad Units you want to place, be sure sure to "add" them when you generate your tags. You'll still be given one "document header" but the "document body" should be separated by a line break between each Ad Unit. The basic code of it is in the format:

More on the GAM tags

For GAM tags, each "Ad Block" will look like this:

<script type='text/javascript'>
  GA_googleFillSlot("Name of your Ad Unit");
</script>

More on GPT tags

For GPT tags you have to be a bit more careful. If you're just copying pasteing, then you should be fine. But please note that GPT tags cannot be mixed and matched unless you modify it. What I mean is that if I generate tags for all my Ad Units now but don't use the "Document Body" code for some of them, I can't just regenerate and dump them in.

The reason for this is that GPT tags sync up ID values and they are unique everytime they get generated. Let's take a quick look at this:

googletag.defineSlot('/XXXXXXX/MFW-728x90', [728, 90], 'div-gpt-ad-1332021380442-0').addService(googletag.pubads());

The above code is part of the "Document Header". It defines the Ad Unit to be displayed.

The orange colored item is the Network Code/Ad Unit name.

The blue colored item is the acceptable size of the Ad Unit.

The red color is the most important. This is the ID you are attaching to the Ad Unit. This ID will show up in your "Document Body" code. It must match up. But you can modify it if you want (eg, instead of div-gpt-ad-XXXXXX you use ad-leaderboard).

<div id='div-gpt-ad-1332021380442-0' style='width:728px; height:90px;'>
  <script type='text/javascript'>
  googletag.cmd.push(function() { googletag.display('div-gpt-ad-1332021380442-0'); });
  </script>
</div>

As you can see, the red from the defineSlot matches the the div ID and the display code. If I wanted to change it to something simplier like "Leaderboard", I can do so but all the red marked items must be match up.

Even More on GPT tags

One thing to note on the "Document Body" block for the Ad Unit is that you can remove the declared height and width for the div. This doesn't effect anything really. This is very useful to do if you are doing something fancy.

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

For now

For now, I'm going to assume you're going to copy and paste.

Next

We're basically done tagging our pages now. Let's move on to creating the Ads.

Comments, suggestions or problems with this guide? Tell me about it!

  1. Setting up DFP
  2. Tagging your Website
  3. Creating your Ads