Get Started with Google Publisher Tag

The Google Publisher Tag (GPT) is an ad tagging library forGoogle Ad Manager.

You can use GPT to dynamically build ad requests.GPT takes key details like the ad unit code, ad size, andcustom targeting, builds the request, and displays the ad on web pages.

For more details on GPT, see theAd Manager help center.

Here are some samples you can use to get started with GPT. Ifyou need more help with GPT, see thesupportoptions.

Display a test ad

The following example walks you through creating a test page thatuses GPT to load a generic ad from Google's test network.

Full code for this example can be found on thedisplay a test ad sample page.

  1. Create a basic HTML document

    In a text editor, create a basic HTML document calledhello-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>

  2. 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 fromhttps://securepubads.g.doubleclick.net/tag/js/gpt.js. Once the library hasfully loaded, it processes any queued commands in thegoogletag object.

    Important: Onlyload GPT from a Google domain.
    <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>

  3. Define an ad slot

    Define an ad slot and initialize GPT using thegoogletag.enableServices() method.

    This code first ensures the googletag object is available, then queues acommand which constructs an ad slot and enables GPT.

    The ad slot in this example will load an ad of size300x250 from the adunit specified by path/6355419/Travel/Europe/France/Paris. The ad will bedisplayed in a<div id="banner-ad"> element in the body of the page, whichwill be added next.

    Ad unit path follows the format/network-code/[parent-ad-unit-code/.../]ad-unit-code,where:

    • network-code is aunique identifier for theAd Manager network the ad unit belongs to
    • parent-ad-unit-code are the codes of all parent ad units (onlyapplies to non-top level ad units)
    • ad-unit-code is the code for the ad unit to be displayed

    Note that all ad unit codes included in the ad unit path must adhere to theformatting rules specified byAd Manager.

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

  4. Specify where the ad will appear

    Specify where the ad will appear on the page by adding the following code tothe<body> of the HTML document.

    Note that the ID of this<div> matches the ID specified when defining thead slot.

    <body>  <div></div>  <script>    googletag.cmd.push(() => {      // Request and render an ad for the "banner-ad" slot.      googletag.display("banner-ad");    });  </script></body>

  5. Preview the test page

    Save thehello-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.

    Caution: If you don’t see an ad, ensure that the div ID specified in the<head> of the page matches the ID of the<div> element you added tothe<body> of the page.

Display your own ad

To display your own ad, use thehello-gpt.html file fromDisplay a testad, then replace the code in the header with code specifyinginventory from your own Ad Manager network.

Note: Before you can display an ad from your Ad Manager network,you need to make sure there's an active line item already trafficked in the"Ready" status. Learn more about creating line items in theAd Manager help center.

  1. Generate an ad tag for the ad unit you'd like to display. Learn more aboutgenerating ad tags in theAd Manager help center.

  2. Copy the ad tag code provided in theDocument header section and use itto replace the corresponding code in the<head> of your HTML document.

    Caution: ensure that the width, height, and ID of the<div> declared in thebody of the page matches the width, height, and ID of the ad slot defined inthe ad tag code.
    <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>

  3. Save the updatedhello-gpt.html file and open it in a web browser.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-02-03 UTC.