The Google Publisher Tag (GPT) is an ad tagging library for Google Ad Manager.
You can use GPT to dynamically build ad requests. GPT takes key details like the ad unit code, ad size, and custom targeting, builds the request, and displays the ad on web pages.
For more details on GPT, see the Ad Manager help center.
Here are some samples you can use to get started with GPT. If you need more help with GPT, see the support options.
Display a test ad
The following example walks you through creating a test page that uses GPT to load a generic ad from Google's test network.
Full code for this example can be found on the display a test ad sample page.
Create a basic HTML document
In a text editor, create a basic HTML document called
hello-gpt.html
.<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Display a fixed-sized test ad." /> <title>Display a test ad</title> <style></style> </head> <body> </body> </html>
Load the GPT library
Load the GPT library by adding the following to the
<head>
of the HTML document.This code loads the GPT library from https://securepubads.g.doubleclick.net/tag/js/gpt.js. Once the library has fully loaded, it processes any queued commands in the
googletag
object.<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Display a fixed-sized test ad." /> <title>Display a test ad</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <style></style> </head>
Define an ad slot
Define an ad slot and initialize GPT using the
googletag.enableServices()
method.This code first ensures the googletag object is available, then queues a command which constructs an ad slot and enables GPT.
The ad slot in this example will load an ad of size
300x250
from the ad unit specified by path/6355419/Travel/Europe/France/Paris
. The ad will be displayed in a<div id="banner-ad">
element in the body of the page, which will be added next.<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Display a fixed-sized test ad." /> <title>Display a test ad</title> <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" ></script> <script> window.googletag = window.googletag || { cmd: [] }; googletag.cmd.push(() => { // Define an ad slot for div with id "banner-ad". googletag .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad") .addService(googletag.pubads()); // Enable the PubAdsService. googletag.enableServices(); }); </script> <style></style> </head>
Specify where the ad will appear
Specify where the ad will appear on the page by adding the following code to the
<body>
of the HTML document.Note that the ID of this
<div>
matches the ID specified when defining the ad slot.<body> <div id="banner-ad" style="width: 300px; height: 250px"></div> <script> googletag.cmd.push(() => { // Request and render an ad for the "banner-ad" slot. googletag.display("banner-ad"); }); </script> </body>
Preview the test page
Save the
hello-gpt.html
file and open it in a web browser. Once loaded, the page will display a test ad in the body of the web page.
Display your own ad
To display your own ad, use the hello-gpt.html
file from Display a test
ad, then replace the code in the header with code specifying
inventory from your own Ad Manager network.
Generate an ad tag for the ad unit you'd like to display. Learn more about generating ad tags in the Ad Manager help center.
Copy the ad tag code provided in the Document header section and use it to replace the corresponding code in the
<head>
of your HTML document.<head> <meta charset="utf-8"> <title>Hello GPT</title> <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script> <script> window.googletag = window.googletag || {cmd: []}; googletag.cmd.push(function() { googletag .defineSlot("ad-unit-path", [width, height], "div-id") .addService(googletag.pubads()); googletag.enableServices(); }); </script> </head>
Save the updated
hello-gpt.html
file and open it in a web browser.