Get started with Google Publisher Tag

Google Publisher Tag code sample

The following is a sample of the full code for creating a Google Publisher Tag (GPT) for desktop and mobile implementations. Use the Google Tag Generator to generate  tag automatically.

Developers and those in need of advanced implementations of GPT, refer to the API reference and sample implementations (such as lazy loading).

View advanced GPT samples

Optimize GPT speed by updating the hosted library domain

The Google Publisher Tag library is now hosted at https://securepubads.g.doubleclick.net/tag/js/gpt.js, in addition to being hosted at the googletagservices.com domain. While not required, we strongly recommend that you update all references to GPT on your pages to use this new domain.

This change consolidates all ad serving requests to one domain, instead of two, which means the browser only needs to connect to one domain. The library is exactly the same at both domains.

The result is an improvement in the speed of your tags and fetching ads.

Google Publisher Tag example code

There are two sections of code implemented for GPT:

  • Configuration of GPT goes in the webpage's  <head>.
  • Calls for each specific ad slot goes in the relevant section of the <body>.

This sample is for informational purposes, and we recommend having a developer implement the code on your website.

GPT configuration

The following code example, includes calling the GPT JavaScript library, defining the ad slots, key-value targeting, and more.

1 <html>
2 <head>
3 <script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
4 <script>
5   window.googletag = window.googletag || {cmd: []};
6 </script>

Lines 3-6: 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.

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

Line 9: "/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.

10       .addService(googletag.pubads())
11       .setTargeting("interests", ["sports", "music", "movies"]);
12     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
13       .addService(googletag.pubads())
14       .setTargeting("gender", "male")
15       .setTargeting("age", "20-30");

Lines 11, 14, and 15: set slot-level key-value targeting with .setTargeting(). 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).

Learn more about setting targeting and sizes with GPT.

16     googletag.pubads().setTargeting("topic","basketball");

Line 16: 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"]).

17     googletag.pubads().enableSingleRequest();

Line 17: googletag.pubads().enableSingleRequest(); enables Single Request Architecture (SRA). Include this line to call all ad slots on the page in one call, which ensures all ad slots on the page are considered when evaluating roadbloacks and competitive exclusions.

18     googletag.enableServices();
19   });
20 </script>
21 </head>
22 <body>
23   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

Line 23 (optional): style="width: 728px; height: 90px" is the initial size set on the div reserving space prior to the creative being 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.

24     <script>
25       googletag.cmd.push(function() {
26          googletag.display("div-gpt-ad-123456789-0");
27       });
28     </script>
29   </div>
30     <div id="div-gpt-ad-123456789-1">
31     <script>
32       googletag.cmd.push(function() {

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

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

Lines 9, 12, 23, 26, 30, and 33: "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.

34       });
35     </script>
36   </div>
37 </body>
38 </html>

View advanced GPT samples

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

You can use GPT without modifying your website's <header>.

Option 1: inline GPT

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.

Because the ad tag uses the GPT JavaScript library, you must include the code which loads the library before including the ad tag code.

Inline GPT example

These inline GPT examples do not support SRA.

Call the GPT JavaScript library

<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
</script>

Sample inline ad 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>

Option 2: put all code in the web page body

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.

Create a Tagless Request without JavaScript

A Tagless Request can be used in the place of an ad tag to request the raw creative code trafficked in Ad Manager. Tagless Requests are generally used when custom parsing and display is needed, such as set-top boxes or other environments without Google tagging or SDK support.

Was this helpful?
How can we improve it?