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).
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:
|
|
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 Learn more about setting targeting and sizes with GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Line 16: 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: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Line 17: |
|
| 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): 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: 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> |
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.
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.