Explore GPT with a test page

To get a better idea of how to display an ad on a web page using Google Publisher Tags (GPT), you can try it yourself by creating a simple HTML file and adding an ad tag to it. This article will show you how to run a test ad on our test network and then will walk you through how to set up your own ad on your own network.

Use a generic ad from Google's test network

1. Create a basic HTML file for testing

In a text editor, create a basic HTML page called hello-gpt.html.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
  </body>
</html>

2. Call the GPT library and request ads from Google's test network

Between the </title> and </head> tags:

Include the GPT library in your page by pasting the following code.

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

This code will load the GPT library from https://securepubads.g.doubleclick.net/tag/js/gpt.js. Once the GPT library has been included on the page, the googletag object is available for subsequent commands you place on the web page.

Define your ad slot and initiate GPT using the enableServices method in the googletag object.

<script>
  window.googletag = window.googletag || {cmd: []};
  googletag.cmd.push(function() {
    googletag
        .defineSlot(
            '/6355419/Travel/Europe/France/Paris', [300, 250], 'banner1')
        .addService(googletag.pubads());
    googletag.enableServices();
  });
</script>

3. Define where ads will appear in your content

Define and configure the ads that will appear on the page by pasting the following code between the <body> and </body> tags.

<div id="banner1" style="width: 300px; height: 250px;">
  <script>
    googletag.cmd.push(function() {
      googletag.display('banner1');
    });
  </script>
</div>
The <div> IDs in the body of the page (banner1 in our example) must exactly match the <div> IDs in the head of the page.

4. Open your saved file in a web browser

After you save your hello-gpt.html file and open it in a web browser, an ad will appear in the body of the web page. If you don’t see the ad, ensure that the <div> ID specified in the <head> of the page matches the ID specified in the <body> of the page.

See the full HTML file example

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</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], 'banner1')
            .addService(googletag.pubads());
        googletag.enableServices();
      });
    </script>

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

Use an ad trafficked in your own network

Before you can run an ad on your network, you will need to make sure there's an active line item already trafficked in Ad Manager in "Ready" status. Learn more about creating line items

Using the same "Hello world" file you used above to create an ad on our test network, replace the code in the header with code specifying inventory on your own network:

  1. Generate code for one of your ad units:

    1. Sign in to Google Ad Manager.

    2. Click Inventory and navigate to the ad unit for which you want to create an ad tag.

    3. Click Generate tags.

  2. Copy the code in the "Document header" section and use it to replace the ad slot code in the <header> portion of your "Hello world" file.

    The code to replace is highlighted below:

    <script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
        googletag
            .defineSlot(
                '/NETWORK_CODE/1ST_LEVEL_AD_UNIT/2ND_LEVEL_AD_UNIT/3RD_LEVEL_UNIT',
                [HEIGHT, WIDTH], 'banner1')
            .addService(googletag.pubads());
        googletag.enableServices();
      });
    </script>
    Make sure that the <div> width and height declared in the body of the page matches the width and height of the ad unit defined in the header.
  3. Save the file and refresh your web browser.

Congratulations! You have served an ad using GPT.

Was this helpful?
How can we improve it?