Press enter to see results or esc to cancel.

Ad Manager Ads

WordPress Ad Manager plugin to insert code for Ad Manager ads

  • Looking for a flexible WordPress Ad Manager plugin?
  • To optimally monetize your website?
  • To insert ads where other plugins have failed?

devices

google ad manager

Introduction

Google Ad Manager is a comprehensive hosted ad serving platform by Google. Google Ad Manager consists of two former services, DoubleClick for Publishers (DFP) and DoubleClick Ad Exchange. It can be used as an ad server but it also provides a variety of features for managing the sales process of online ads using a publisher’s dedicated sales team. Should a publisher not sell out all their available ad inventory, it can choose to run either other ad networks or AdSense ads as remnant inventory in Google Ad Manager.

DoubleClick for Publishers has been replaced by Ad Manager

To show Ad manager (or DoubleClick for Publishers) ads you need to place code for Ad Manager ads on your website – you need WordPress Ad Manager Plugin. Ad Inserter is a perfect tool to automatically insert code for Ad Manager ads on any page. Ad Manager header code support and clearance options to avoid inserting ads near images or headers, are just two advanced features that will help you to monetize your website with Ad Manager. Here we explain specific settings for the code for Ad Manager ads. For details please check also automatic insertionWordPress page types, header code and code editing.

Ad Manager code

Basically the code is similar to other ads like AdSense. You need to insert Google Publisher Tag (GPT) JavaScript code into a webpage. Each time this page is visited, the JavaScript code creates an IFrame, Ad Manager decides which campaign wins and delivers the creative to the IFrame.

The main difference is that there are two ad codes. When you click on Generate tags in Ad Manager you get two codes: one normally goes into the header (<head> section of HTML page), while the other code (ad unit) goes into the <body> part of the page – where you want the ad to be displayed. For example, for AdSense ad units you only need to insert one code (into the <body> part of the page) where you want the ad to be displayed. This is where Ad Inserter normally inserts blocks.

Ad Inserter supports header code. However, this code is normally inserted on all pages. You can configure page-specific header code, however, for DFP ads and Ad Manager tags a more flexible approach is needed. Since header code is used to load Ad Manager ads and the body code only represents the container for (already loaded) ad, it makes sense to generate and run header code only when Ad Manager ad block is inserted.

Ad Inserter offers a very flexible way to define header code in every block using the [ADINSERTER HEAD] shortcode as separator. This header code is inserted only when the block is inserted. So you always have Ad Manager hader code that matches inserted Ad Manager ad blocks. 

Please note that this can work only when Output buffering is enabled.

HEAD CODE

[ADINSERTER HEAD]

BODY CODE

This way you can specify code in the <head> section of HTML page for every block. You can still place common header code in the Header code window (tab ⚙ / tab Header). Block head code should contain only header code that is specific to this block. This code will be inserted AFTER header code configured on the Header tab. You can also define header code that will be inserted at specific place in the header:

HEAD CODE

[ADINSERTER HEAD group="Group name"]

BODY CODE

When you define a group for head code then this code will be added to this group. To insert this code group use shortcode [ADINSERTER name="Group name"] in the header code (tab ⚙ / tab Header). This way you can precisely define where in the header this code will be inserted.

Make sure the name of the code group is different from block (ad) names.

Header code defined in blocks with the [ADINSERTER HEAD] separator can be inserted in the header only when Output buffering is enabled. Because of this there are also some additional limitations:

  • For blocks using ad rotation when Dynamic blocks is set to client-side, header code for all rotation options is inserted.
  • For blocks using referrers, cookies, IP addresses or countries list checks when Dynamic blocks is set to client-side, header code defined in blocks is always inserted.
  • For blocks using client-side device detection, header code defined in block is inserted for all devices.

Examples of Ad Manager ads with Ad Inserter

Here we are showing practical examples of inserting Google Ad Manager tags and code for DoubleClick for Publishers (DFP) ads to WordPress using Ad Inserter. Described are 3 different cases: single ad block on the page, multiple insertions of the same ad blocks on the page and ad block with infinite scroll (loading Ad Manager ads in Ajax requests). Each case needs a special approach as there are two codes, one JavaScript code in the header and one (or more) HTML/JavaScript ad codes (tags) in the body part of the page. In addition to this, each ad unit uses unique ID so there can be only one such ad unit with this ID on the page. Ad Inserter plugin is very flexible and can generate unique IDs and match header code to (body) ad codes (tags).

Please note that there can be different forms of Ad Manager code. We are showing only a typical approach for few cases. You will need to adapt the code according to your needs and use your own tags, IDs, etc. Check Google Publisher Tag sample for details.  For the examples we’ll use the following codes:

Header code:
<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
  googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
  googletag.pubads().enableSingleRequest();
  googletag.enableServices(); });
</script>
Body code:
<!-- /1234/travel/asia -->
<div id='div-gpt-ad-123456789-0'>
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-123456789-0'); });
</script>
</div>

Single Ad Manager / DFP ad block

If this would be the only Ad Manager ad block used we could simply put header code in the Header code window and body (ad) code in the block code window. However, since the block may not be inserted on all pages it makes sense to optimize the code. We’ll show two possible approaches using the [ADINSERTER HEAD] separator.

In the first example we’ll simply put ad specific header code into block. The general header code to load googletag goes into Header code window (tab ⚙ / tab Header):

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

Below is the block code. The code above the HEAD separator will be inserted AFTER Header code above ONLY when this block will be inserted (check exceptions above):

<script>
  googletag.cmd.push(function() {
  googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
  googletag.pubads().enableSingleRequest();
  googletag.enableServices(); });
</script>

[ADINSERTER HEAD]

<!-- /1234/travel/asia -->
<div id='div-gpt-ad-123456789-0'>
<script>
  googletag.cmd.push(function() { googletag.display('div-gpt-ad-123456789-0'); });
</script>
</div>

However, we can further optimize this code. In the second example we’ll put in the general header window all the code that is common for all Ad Manager ads. We’ll use [ADINSERTER name="Google tags"] shortcode where we would like to insert block specific header code:

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {}; 
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
[ADINSERTER name="Google tags"]
  googletag.pubads().enableSingleRequest();
  googletag.enableServices(); });
</script>

Block code contains only code that is specific for this ad:

    googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-0').addService(googletag.pubads());

[ADINSERTER HEAD group="Google tags"]

<!-- /1234/travel/asia -->
<div id='div-gpt-ad-123456789-0'>
<script>
  googletag.cmd.push(function() { googletag.display('div-gpt-ad-123456789-0'); });
</script>
</div>

The code above [ADINSERTER HEAD group="Google tags"] separator will be inserted in the header code where [ADINSERTER name="Google tags"] shortcode is present. This approach is useful when you need to insert multiple header codes at some place in the header. For example, you have another Ad Manager ad block:

    googletag.defineSlot('/1234/travel/europe', [300, 250], 'div-gpt-ad-987654321-0').addService(googletag.pubads());

[ADINSERTER HEAD group="Google tags"]

<!-- /1234/travel/europe -->
<div id='div-gpt-ad-987654321-0'>
<script>
  googletag.cmd.push(function() { googletag.display('div-gpt-ad-987654321-0'); });
</script>
</div>

Both blocks would generate the following header code (assuming both blocks would be inserted on the page):

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
    googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-0').addService(googletag.pubads());
    googletag.defineSlot('/1234/travel/europe', [300, 250], 'div-gpt-ad-987654321-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices(); });
</script>

Ad codes with custom data

There is an easy way to include data from your posts into ad code to target specific categories, tags, post values, etc.

General page data like category, tags, author or url

For this purpose you can use ADINSERTER DATA shortcodes. For example, if the ad code supports category data, the shortcode for the post category can be used like this:

category = [adinserter data='category']

The plugin would then insert the category name into the ad code according to the post category.

Custom post data

You can also create custom data for each post using custom fields (WP feature). Custom fields can be defined in the post editor (below the post content). You can also use a dedicated plugin for additional features of custom fields, for example Advanced Custom Fields. Once the posts have a custom field set you can insert this data into the ad code with a shortcode:

[adinserter custom-field='CUSTOM_FIELD_NAME']

For example, if you defined a custom field product for a post and the ad code supports (or needs) product data, the shortcode for the post product can be used like this:

product = [adinserter custom-field='product']

Individual values for individual ads

When you are inserting ads with ADINSERTER shortcodes you can also specify additional values as shortcode attributes that can be used in the ad codes. For example:

[adinserter block="n" info="Ad Inserter" type="Plugin" price="FREE"]

This shortcode would insert code for block number n. In block n you can use the following tags to get the data that was passed to the block:

{#info:#}
{#type:#}
{#price:#}

For example, if the ad code supports (or needs) price data, the tag for the price can be used like this:

price = {#price:#}

In the case the block was inserted with a shortcode above, the key price would get value FREE. After the colon you can specify the default value to be inserted in the case the attribute is not defined, for example:

price = {#price:null#}

Multiple Ad Manager / DFP ad blocks

When you have multiple insertions of the same Ad Manager / DFP ad on the page (for example, insertion of the same ad unit between multiple paragraphs) you need to make sure ad codes will have different IDs. Each <div id="xxxxx"> tag has id which needs to unique. If this id is not unique only the first ad with this id will be loaded. There are two possible approaches to achieve this: server-side code or client-side (JavaScript) code that takes care for unique IDs.

Please note that you also need to properly configure Ad Manager to show ads in ad unit more than one once. For example, one way is to configure Line Item to display creatives more than once. Check Google Ad Manager Help for details.

Server-side approach works fine where the page has no dynamic content and is always fully loaded, while client-side code is universal and should be used where ads (Ad Inserter blocks) are loaded after the page is generated (infinite scroll, lazy loading, insert mode for client-side device detection or client-side Dynamic blocks). 

Client-side mode may also load the same creative for subsequent ad units. Check Google Ad Manager Help for details on how to configure Line Item for creative rotation.

Multiple Ad Manager / DFP ad blocks with server-side unique IDs

This approach is similar to the example above. The only difference is that we are not inserting two different Ad Inserter blocks but the same block more than once (for example, multiple insertions between posts). In order to make IDs unique we use [ADINSERTER counter="block"] shortcode. This shortcode returns number which corresponds to the insertion counter for this block (1 for the first insertion, 2 for the second one,…):

    googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-[ADINSERTER counter="block"]').addService(googletag.pubads());

[ADINSERTER HEAD group="Google tags"]

<!-- /1234/travel/asia -->
<div id='div-gpt-ad-123456789-[ADINSERTER counter="block"]'>
<script>
  googletag.cmd.push(function() { googletag.display('div-gpt-ad-123456789-[ADINSERTER counter="block"]'); });
</script>
</div>

This way each insertion of this block will generate JavaScript / HTML code with unique IDs. Header code looks the same as for single insertion:

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
  [ADINSERTER name="Google tags"]
  googletag.pubads().enableSingleRequest();
  googletag.enableServices(); });
</script>

After the insertion the actual header code would look like this (assuming block was inserted 3 times):

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
    googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-1').addService(googletag.pubads());
    googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-2').addService(googletag.pubads());
    googletag.defineSlot('/1234/travel/asia', [728, 90], 'div-gpt-ad-123456789-3').addService(googletag.pubads());
    ...
    googletag.pubads().enableSingleRequest();
    googletag.enableServices(); });
 </script>
Multiple Ad Manager / DFP ad blocks with client-side unique IDs

Client-side approach uses Javascript code to make unique ids. The code is based on Advanced Google Publisher Tag samples. In the Header we use the following code:

<script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>

<script>
  googletag.cmd.push(function() {
    googletag.pubads().enableSingleRequest();
    googletag.pubads().disableInitialLoad();
    googletag.enableServices(); 
  });

  var aiNextSlotId = 1;

  function aiGenerateNextSlotName() {
    var id = aiNextSlotId ++;
    return 'ai-slot-' + id; 
  } 

  function aiLoadBlock(adUnitPath, size) {
    var slotName = aiGenerateNextSlotName();
    document.getElementById ("ai-block").id = slotName;

    googletag.cmd.push (function() {
      var slot = googletag.defineSlot(adUnitPath, size, slotName). 
        addService(googletag.pubads());
      googletag.display(slotName);
      googletag.pubads().refresh([slot]);
    });
  }
</script>

Code in the header prepares everything to load ads and provides functions to generate unique names (IDs) for slots and to load ads. For ad block we use the following code:

<div id="ai-block"></div>

<script>
  aiLoadBlock ('/1234/travel/asia', [728, 90]);
</script>

Please note that the code examples above are only examples to show how to use Ad Inserter to insert code for Ad Manager / DFP ad blocks. Use and adapt your own codes with your IDs.