When including Google DoubleClick for Publishers, a powerful ad server, into dynamic sites like the ones set up with WordPress, you often face the problem that the ads loaded in the header and displayed in the content don’t match. This can even cause the ad impressions to count wrong and be viewed as fraud by potential advertisers.

In this article I am going to show you methods on how to fix this problem with WordPress or in general.

What you are going to learn:

  • The problems caused by ads defined in the header, but not appear in the content
  • Load the right ads using WordPress’ Conditional Tags
  • Inline ad unit tags that don’t need to be defined in the header

The problem: header and body ads don’t match

When you get the code for an ad unit in DFP it normally contains code to include into the header (= the invisible part of your website) and the body (the visible part). This seems fine for websites that have a static structure and layout.

However, with modern content management systems like WordPress, you have very different page structures. There are pages listing multiple posts, single posts, author pages, the front page, static content, etc.

While the main content changes a lot, technically, the header often stays the same.

Imagine you want to display an ad unit within your post content only. You would include it after some paragraph and put the header code in your template file or an appropriate content field that gets injected into the header. When you now visit a static page, the header tag is still the same, but the ad unit tag is nowhere to be found.

In this situation, it can happen, that the impression of the content ad is still counted, even though the ad is never visible.

So, this is how to solve this.

Load the right ads with WordPress conditional tags

A “normal” header tag consists of two parts. The first part stays the same, so let’s concentrate on the second part.

<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.defineSlot('/1234567/300_250_Rectangle', [300, 250], 'div-gpt-ad-123123123-0').addService(googletag.pubads());
googletag.defineSlot('/1234567/728_90_Leaderboard', [728, 90], 'div-gpt-ad-123123124-0').addService(googletag.pubads());
googletag.enableServices();
});
</script>Code language: HTML, XML (xml)

In this example, we defined two ad units, a Medium Rectangle, and a Leaderboard.

We now decided to display the ad unit only within posts on single post pages and therefore would only load the ad in case we are on a single post. We would change the code like this:

<script type='text/javascript'>
googletag.cmd.push(function() {
<?php if(is_single()) : ?>
googletag.defineSlot('/1234567/300_250_Rectangle', [300, 250], 'div-gpt-ad-123123123-0').addService(googletag.pubads());
<?php endif; ?>
googletag.defineSlot('/1234567/728_90_Leaderboard', [728, 90], 'div-gpt-ad-123123124-0').addService(googletag.pubads());
googletag.enableServices();
});
</script>Code language: PHP (php)

What did I do here? I used PHP and a Conditional Tag in line 3 to check if we are currently on a single post page and only load the header ad tag in this case.

Conditional Tags are a well-documented feature of WordPress and if you are a bit familiar with coding in PHP, they are easy to use.

Another way to load ads only when needed without much coding and for any content management system is the following.

Inline ad unit tags

A well-hidden way to load ads only on pages where they get displayed is the inline tags. They don’t need any implementation in the header and are therefore most flexible.

Code part 1

The inline tags consist of two parts. Even though you don’t have to, I would load the first, the general library, within the header of your page.

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
</script>Code language: HTML, XML (xml)

Code part 2

You can handle the second part like tags from most ad networks, e.g. AdSense, and simply inject it at the position where they should be displayed later.

A sample code for a normal ad without any targeting would look like this.

<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>Code language: HTML, XML (xml)

Maybe you noticed, that the information in the first and fourth lines are taken from the original ad unit tag code. Simply exchange them with your own information.

Code combined into one tag

This is how the code would look like if you combined both codes. You can use that like any other body-ad tag and don’t need to have a separate head code.

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script> var googletag = googletag || {}; googletag.cmd = googletag.cmd || [];</script>
<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>Code language: HTML, XML (xml)

If you are using ad-slot level targeting then you can use this template for a body tag:

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script> var googletag = googletag || {}; googletag.cmd = googletag.cmd || [];</script>
<div id="div-gpt-ad-1234567891234-0">
  <script>
    googletag.cmd.push(function() {
      googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
        .addService(googletag.pubads())
        .setTargeting("Gender", "Male");
      googletag.enableServices();
      googletag.display('div-gpt-ad-1234567891234-0');
  });
  </script>
</div>Code language: HTML, XML (xml)

Injecting ads into header and content in WordPress

If you need a solution to insert the header code and ad code into the content, you might want to take a look at my Advanced Ads plugin and the DFP related tutorial.

The Author

Comments

  1. Sienna Eskildsen

    Great article. I’ve been working on a responive design all weekend and this was one of only two posts I found that addressed DFP.