Google Publisher Tag sample

Following is a sample of the full code for creating a Google Publisher Tag (GPT) for desktop and mobile implementations. Learn how to use the Google Tag Generator to generate GPT tags automatically.

The article also includes instructions for issues editing the header of your webpages and creating a 1x1 tracking pixel without using JavaScript.

Watch related Publisher University training

Example of a Google Publisher Tag

See code without tips
1 <html>
2 <head>
3 <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js">
4 </script>
5 <script>
6   var googletag = googletag || {};
7   googletag.cmd = googletag.cmd || [];
8 </script>
9 <script>
10   googletag.cmd.push(function() {
11     googletag.pubads().set("adsense_background_color", "FFFFFF");
12   });
13 </script>
14 <script>
15   googletag.cmd.push(function() {
16     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
17       .addService(googletag.pubads())
18       .setTargeting("interests", ["sports", "music", "movies"]);
19     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
20       .addService(googletag.pubads())
21       .setTargeting("gender", "male")
22       .setTargeting("age", "20-30");
23     googletag.pubads().setTargeting("topic","basketball");
24     googletag.pubads().enableSingleRequest();
25     googletag.enableServices();
26   });
27 </script>
28 </head>
29 <body>
30   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
31     <script>
32       googletag.cmd.push(function() {
33          googletag.display("div-gpt-ad-123456789-0");
34       });
35     </script>
36   </div>
37     <div id="div-gpt-ad-123456789-1">
38     <script>
39       googletag.cmd.push(function() {
40          googletag.display("div-gpt-ad-123456789-1");
41       });
42     </script>
43   </div>
44 </body>
45 </html>
 
1 <html>
2 <head>
3 <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js">
4 </script>
5 <script>
6   var googletag = googletag || {};
7   googletag.cmd = googletag.cmd || [];
8 </script>

Lines 3-8: Boiler-plate that asynchronously loads the GPT library used by Ad Manager, using SSL/HTTPS. This is where the command queue is built, which handles the list of functions (generally, ad calls) to be handled asynchronously. You don't need to edit this section of code.

9 <script>
10   googletag.cmd.push(function() {
11     googletag.pubads().set("adsense_background_color", "FFFFFF");
12   });
13 </script>

Lines 9-13 (optional): Set page-level attributes for ad slots that serve AdSense. Changing these attributes overrides any styles set in Ad Manager or AdSense. This function is not commonly used, since you can set this in Ad Manager. The developer documentation for the .set() function describes how to set AdSense parameters in GPT.

14 <script>
15   googletag.cmd.push(function() {
16     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")

Line 16: "/1234/travel/asia" specifies the network code (1234) and targeted ad unit (travel/asia). Find your network code in Ad Manager under Admin and then Global settings and then Network code.

[728, 90] sets the ad slot creative size. Indicate multiple sizes using the syntax: [[width1, height1], [width2, height2], [width3, height3]]. Associate all sizes here with the targeted ad unit, allowing you to narrow the list down based on the specific slot. When using multiple size ad slots, declare the slot sizes in the same order that they appear in Ad Manager. Learn more about slot definition and sequentiality.

17       .addService(googletag.pubads())
18       .setTargeting("interests", ["sports", "music", "movies"]);
19     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
20       .addService(googletag.pubads())
21       .setTargeting("gender", "male")
22       .setTargeting("age", "20-30");
23     googletag.pubads().setTargeting("topic","basketball");

Lines 18, 21, and 22: Set slot-level key-value targeting with the .setTargeting() function. You can associate multiple values with one key, as in the first example: ("key", ["value1", "value2", "value3"]). To target multiple keys, call the function multiple times, as in the second case: (gender=male and age=20-30).

The developer documentation for the .setTargeting() function describes how to set key-value parameters in GPT. Learn more about setting targeting and sizes with GPT

Line 23: googletag.pubads().setTargeting("topic","basketball"); sets page-level key-value targeting. When configuring targeting with page-level key-values, all ad slots inherit this targeting. Like slot-level key-values, you can associate multiple values with one key: ("key", ["value1", "value2", "value3"]).

24     googletag.pubads().enableSingleRequest();

Line 24: googletag.pubads().enableSingleRequest(); enables Single Request Architecture (SRA). Include this line to call all ad slots on the page in one call (allows for guaranteed roadblocks, and may have performance benefits for your page).

25     googletag.enableServices();
26   });
27 </script>
28 </head>
29 <body>
30   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

Line 30 (optional): style="width: 728px; height: 90px" is the size that the element takes before the creative is rendered. If using multi-size tags, we recommend either omitting this (in that case, the size of the element takes the size of the selected creative when rendered) or making both dimensions large enough to contain the largest eligible creative. For single size ad tags, use this parameter to expand the container element until the creative loads so that other page elements don't shift when the creative renders.

31     <script>
32       googletag.cmd.push(function() {
33          googletag.display("div-gpt-ad-123456789-0");
34       });
35     </script>
36   </div>
37     <div id="div-gpt-ad-123456789-1">
38     <script>
39       googletag.cmd.push(function() {

Lines 10, l5, 32, and 39: Function calls are added to a command queue to be processed asynchronously when the page loads.

40          googletag.display("div-gpt-ad-123456789-1");

Lines 16, 19, 30, 33, 37, and 40: "div-gpt-ad-123456789-0" is how we match the ad slots defined in the head to the ad slots on the page (the div tags in the body where the creatives serve). They can be named anything as long as they match, but our tag generator uses the naming convention of "div-gpt-ad-[random number]-0", "div-gpt-ad-[random number]-1" and so on. Use the same <div> ID consistently for a given position on a page, as it is used for optimization in a wide range of areas.

While random numbers are used here, this is not how GPT uniquely identifies an ad request. That is done behind the scenes with the GPT library. Additionally, these names may be the same from page to page as long as there aren't multiple instances of the same div name on the same page.

Learn more about the Ad Manager inventory structure, ad unit hierarchy, and how ad units inherit targeting in the inventory overview.

41       });
42     </script>
43   </div>
44 </body>
45 </html>

If you can't edit the header of your web pages

You can use GPT without modifying the header of your web pages.

Option 1: Use an inline tag to define where the ad unit appears on the page, rather than using the page header. With an inline tag, the entire GPT ad slot definition and request, including loading the GPT library, is contained within a single <script> tag. Here are examples of defining an ad slot inline.

Because the ad tag uses the GPT JavaScript library, you must include the code that loads the library before including the ad tag code (as shown in the following examples).

Inline asynchronous GPT example

These inline GPT examples do not support SRA.

Call the GPT JavaScript library

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

Sample ad tag 1: Inline tag

<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>

Sample ad tag 2: Condensed inline tag (does not support ad-slot level targeting)

<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>

Option 2: Use conventional GPT implementation, but put the ad slot definitions in the body of your HTML, rather than the header. The code that loads the library and defines the ad slots must be called before you request ads for those slots. Because the code isn't segmented into the head and body of your page and you must manage its sequence, this approach is more complex, but provides the flexibility of SRA.

Use a non-JavaScript GPT tag to create a 1x1 tracking pixel

To create an impression tracker with GPT:

  1. Create a new ad unit or choose an existing one with which to track the impression count.

  2. Create a line item with a size of 1x1 and add a transparent pixel image creative to it.

  3. Target the 1x1 line item to the ad unit created in step 1.

  4. Create a non-JavaScript GPT tag calling the impression pixel and specifying the ad unit created in step 1. For example:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    Learn how to generate non-JavaScript based URLs

  5. Use the impression pixel tag in one of two ways:

    • Add the tag to a custom or third-party creative that will be delivered onto the page: On the creative's "Settings" page, add the tag to the top of the "Code snippet" box.

    • Add the tag directly to the web page.

Was this article helpful?
How can we improve it?