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.

These examples use GPT in asynchronous mode. We recommend using asynchronous ad tags for a faster page load experience. Learn more about asynchronous tags and cases where it's still appropriate to use synchronous tags.

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 myHelloGPTWorld.html.

<html>
  <head>
  </head>
  <body>
  </body>
</html>

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

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

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

<script type="text/javascript">
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
  (function() {
    var gads = document.createElement("script");
    gads.async = true;
    gads.type = "text/javascript";
    var useSSL = "https:" == document.location.protocol;
    gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
    var node =document.getElementsByTagName("script")[0];
    node.parentNode.insertBefore(gads, node);
   })();
</script>

This code will load the GPT library from http(s)://www.googletagservices.com/tag/js/gpt.js, which is the global namespace for the Google Publisher Tags API. Once the GPT library has been included on the page, the googletag class 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 class.

<script type="text/javascript">
  googletag.cmd.push(function() {
    var adSlot1 = googletag.defineSlot('/6355419/Travel/Europe/France/Paris',[300, 250], "banner1");
    adSlot1.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.

<p>Hello world GPT Ad!</p>
<div id="banner1" style="width:300px; height:250px;">
  <script type="text/javascript">
    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 myHelloGPTWorld.html file and open it in a web browser, an ad will appear in the body of the webpage. If you don’t see the ad then 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

<html>
<head>
<script type="text/javascript">
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
  (function() {
    var gads = document.createElement("script");
    gads.async = true;
    gads.type = "text/javascript";
    var useSSL = "https:" == document.location.protocol;
    gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
    var node =document.getElementsByTagName("script")[0];
    node.parentNode.insertBefore(gads, node);
   })();
</script>
<script type="text/javascript">
  googletag.cmd.push(function() {
    var adSlot1 = googletag.defineSlot('/6355419/Travel/Europe/France/Paris',[300, 250], "banner1");
    adSlot1.addService(googletag.pubads());
    googletag.enableServices();
  });
</script>
</head>
<body>
  <p>Hello world GPT Ad!</p>
  <div id="banner1" style="width:300px; height:250px;">
    <script type="text/javascript">
      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 type="text/javascript">
    googletag.cmd.push(function() {
      var adSlot1 = googletag.defineSlot('/network_code/first_level_ad_unit/second_level_ad_unit/ \\
    third_level_ad_unit',[height, width]
    , "banner1");
      adSlot1.addService(googletag.pubads());
      googletag.enableServices();
    });
    </script>
    The div IDs in the body of the page must exactly match the div IDs in the head of the page. 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 asynchronous mode.

Was this article helpful?
How can we improve it?