Detect if DFP ad units are on the page

To tell Google Tag Manager that DFP ad units are on the page, a variable will be set up which looks for DOM elements that need to be filled with ads. This variable uses a CSS selector to find these elements, and GTM will store the result in a variable which can be looked at later. To begin, open Google Tag Manager and log in, then select the relevant container. Once you're in GTM, follow the instructions to set up the variable.

1. Choose Variables, then select New under User-Defined Variables at the bottom of the page.
   
2. Give the variable a name (in this example, we'll use DFP Ads), then select DOM element as the type.
3. Under Configure Variable choose CSS selector as the Selection Method and enter the following as the Element Selector:
   div[id^="div-gpt-ad-"]
   This looks for all div elements on the page which have an id beginning div-gpt-ad-. Leave Attribute Name empty.
4. Make sure your variable looks like the following before continuing with this tutorial.

If you're interested in precisely what this does, here's the explanation: Google Tag Manager, once the DOM has loaded, looks through the DOM for all elements matching the CSS selector of div[id^="div-gpt-ad-"]. This CSS selector is looking for all div elements (which the DFP ad tags are, but so are other elements on the page) with an ID beginning with div-gpt-ad-, which is true only for DFP ad tags, but is true for all DFP ad tags. Thus, the content of the variable is the concatenation of these elements. We'll use this variable to trigger the tag if and only if there are DFP ad units on the page which need DFP ads.

Trigger the DFP ad code

Using the variable we just set up, a trigger can be set up to trigger the DFP ad code (which we haven't got yet, but we'll get there).

1. In Google Tag Manager, select Triggers → New.
2. Set a name for the trigger (in this example, we'll use Page contains DFP Ads), and choose Page View as the event.
3. For the trigger type…
   • Page View: Don't use this option — DFP will not inject ads correctly with this selected.
   • DOM Ready: Use this if you wish for the DFP ads to be injected as soon as possible.
   • Window Loaded: Use this if you don't mind a short delay before the ads are injected in return for making sure that all the other elements of your page are loaded first.
4. Under Fire On, select Some Page Views, then select your variable that you named earlier (in our case, DFP Ads). Choose does not equal and enter null into the box on the right.
   

Generate the DFP tags for use in GTM

You'll have to make some changes to the DFP ad code before you can add it though. Before you begin this section, open DoubleClick for Publishers and log in to your account. In this tutorial, we will use a DoubleClick for Publishers Small Business account, however this also works with DoubleClick for Publishers Premium accounts.

1. In DoubleClick for Publishers, select Inventory → Generate tags. Under Select ad units, click Include all, then Generate Tags.
2. Set the tag type to Google Publisher Tag, then click Continue. Leave the tag options to their defaults, and click Continue.
3. Copy and keep the Document header section of the ad tags. You'll need to add this to the tag in Google Tag Manager. Ignore the Document body section of the ad tags.  

Add the DoubleClick for Publishers ad tag code

It's time to add the ads from DFP.

1. In Google Tag Manager, select Tags → New.
2. Set a name for the tag (in this example, we'll use Google DFP). For the product, choose Custom HTML Tag.
3. Paste in the DFP tag you copied in the previous section. We'll need to make some changes to this code though.
4. Add the following code before the last closing <script> tag. This loops through all elements with an id beginning with div-gpt-ad- and calls googletag.display(element) on each element.
   var adunits = document.querySelectorAll('div[id^="div-gpt-ad-"]'); for (var i = 0; i < adunits.length; i++) { googletag.cmd.push(function() { googletag.display(adunits[i].getAttribute('id')); }); }
5. Under Advanced Settings, set Tag firing options to Once per page. This ensures the code is not run multiple times per page.
6. For Fire On, choose Some Pages, then check the trigger you named earlier (in this example, Page contains DFP Ads is the name of the trigger).
7. Click Save Tag, then choose Publish in the top-right to publish this code to your site's GTM tag. Don't worry that you haven't implemented the ads yet — the code has no effect without the next section implemented.

Add the ad units to your HTML

You now need these div-gpt-ad- elements on your page to tell the code above where to inject the ads. You shouldn't use the code from DFP, as mentioned earlier. Instead, you should take the ID from the tag in the previous section and use this as the id for the div element on your page.

Look in the tag code you added in GTM. You should see lines which look like this:

googletag.defineSlot('/122783354/BlogFooter', [728, 90], 'div-gpt-ad-1455876604709-0').addService(googletag.pubads());Code language: JavaScript (javascript)

The string I have marked as bold is the id of the div you need to insert in your HTML for this ad unit. The div needs to be empty for this to work. Again, don't insert the Document body code provided by DFP into the div — use this instead.

<div id="div-gpt-ad-1455876604709-0"></div>Code language: HTML, XML (xml)

DoubleClick for Publishers is now implemented using Google Tag Manager!

Any pages with DFP ad units should now load using Google Tag Manager! If you have any questions, let me know in the comments below. Here's an example ad implemented using the method discussed in this article.