Get Started with Google Publisher Tags

The Google Publisher Tag (GPT) is an ad tagging library for Google Ad Manager which is used to dynamically build ad requests. It takes key details from you (such as ad unit code, ad size, and custom targeting), builds the request, and displays the ad on web pages.

For a brief overview of GPT, including it's benefits, basic functionality and features, visit the Ad Manager help center.

Display a test ad

The following example walks you through the process of creating a test page that uses GPT to load a generic ad from Google's test network.

  1. 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">
        <title>Hello GPT</title>
      </head>
      <body>
      </body>
    </html>
    
  2. Load the GPT library

    Load the GPT library by adding the following to the <head> of the HTML document.

    <head>
      <meta charset="utf-8">
      <title>Hello GPT</title>
      <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    </head>
    

    This code will load the GPT library from https://securepubads.g.doubleclick.net/tag/js/gpt.js. Once the library has fully loaded, it will process any queued commands in the googletag object.

  3. Define an ad slot

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

    <head>
      <meta charset="utf-8">
      <title>Hello GPT</title>
      <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
      <script>
        window.googletag = window.googletag || {cmd: []};
        googletag.cmd.push(function() {
          googletag
              .defineSlot(
                  '/6355419/Travel/Europe/France/Paris', [300, 250], 'banner-ad')
              .addService(googletag.pubads());
          googletag.enableServices();
        });
      </script>
    </head>
    

    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.

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

    <body>
      <div id="banner-ad" style="width: 300px; height: 250px;">
        <script>
          googletag.cmd.push(function() {
            googletag.display('banner-ad');
          });
        </script>
      </div>
    </body>
    

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

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

Using the hello-gpt.html file created in the Display a test ad section, replace the code in the header with code specifying inventory from your own Ad Manager network.

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

  2. 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 async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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 updated hello-gpt.html file and open it in a web browser.