GPT Light

GPT Light is a lightweight ad tag which prioritizes performance over customization. GPT Light intentionally has a minimal API surface and primarily utilizes a declarative API.

Note: GPT Light is currently only supported as a passback tag.

GPT Light Declarative API

Ad Slot Declaration

Declaring an ad slot starts with creating a div with the data-glade property. All GPT Light tags should have the following form.

<div data-glade ...></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

Ad Unit Path

The ad unit path is set by specifying the ad unit you want to target as a string in the data-ad-unit-path attribute of the tag. This field is required for an ad request to be sent.

<div data-glade data-ad-unit-path='/1234567/sports'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

Ad Size

GPT Light provides a rich sizing API. The API allows you to distinguish between the following:

Container size - The size the ad iframe takes.

Request size - The size of the ad requested.

There are four tag attributes associated with specifying these dimensions. The height and width attributes specify the container size. The data-request-height and data-request-width attributes specify the request size. All of these attributes are optional and behave in the following ways.

If no height or width is specified, we use the clientHeight and clientWidth values of the slot at the time the request is built. If no data-request-height or data-request-width are specified, the container size is used for the request size.

The height and width attributes accept two types of values. The value can be set to 'fill' to specify '100%' or can be set to a non-negative number which specifies the size in pixels. The data-request-height and data-request-width attributes only accept non-negative numbers to specify the size in pixels.

  • Examples:

    <div data-glade data-ad-unit-path='/1234567/sports'></div>
    <script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>
    
  • Container size: slot.clientWidth x slot.clientHeight

  • Ad size: slot.clientWidth x slot.clientHeight

    <div data-glade data-ad-unit-path='/1234567/sports' width='300' height='200'></div>
    <script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>
  • Container size: 300px x 200px
  • Ad size: 300px x 200px

    <div data-glade data-ad-unit-path='/1234567/sports' width='fill' height='fill'></div>
    <script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>
  • Container size: 100% x 100%
  • Ad size: slot.clientWidth x slot.clientHeight

    <div data-glade data-ad-unit-path='/1234567/sports' width='fill' height='200'></div>
    <script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>
  • Container size: 100% x 200px
  • Ad size: slot.clientWidth x 200px

    <div data-glade data-ad-unit-path='/1234567/sports' width='fill'
    data-request-width='300'></div>
    <script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>
  • Container size: 100% x slot.clientHeight
  • Ad size: 300px x slot.clientHeight

Click URL

A click redirect URL can be used by setting the data-click-url attribute to the string that should prepend the click URL.

<div data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'
data-click-url='https://some-domain/q='></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

Page URL Override

The page URL that is reported can be modified by setting the data-page-url attribute to the string which should be reported as the URL.

<div data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'
data-page-url='https://some-domain/some/path'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

JSON API

Other settings are controlled through a JSON object passed into the data-json attribute. Note: All key/value strings in the JSON object should use double quotes to ensure proper parsing by JSON.parse().

Cookie opt-out is supported through the data-json property. The key cookieOptOut should specify a true/false boolean as its value. This allows disabling cookies on a per-slot basis.

<div data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'
data-json='{"cookieOptOut": true}'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

Targeting

Targeting is supported through the data-json property. The key targeting should specify targeting values through a JSON object as its value. Values in the targeting JSON object should specify a string or array of strings.

<div data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'
data-json='{"targeting": {"key": "1", "sports":["football", "rugby"]}}'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

Category Exclusions

Category Exclusions are supported through the data-json property. The key categoryExclusions should specify a string or array of strings representing excluded categories.

<div data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'
data-json='{"categoryExclusions": ["football", "rugby"]}'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

Tag for Child Directed Treatment

Tag for Child Directed Treatment is supported through the data-json property. The key tagForChildDirectedTreatment should specify a number 1 to enable TFCD or 0 to disable TFCD. Omitting this key keeps default behavior. Note: See the GPT TFCD Small Business and Premium articles for more information on this feature.

<div data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'
data-json='{"tagForChildDirectedTreatment": 1}'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>

Events

GPT Light exposes the following events which can be listened for.

Ad Fetched

The gladeAdFetched event exposes metadata about the creative in its detail property. This event fires once the ad returns, as soon as the metadata is available to be used. The target of the event is the slot that fired it.

<div id='mySlot' data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>
<script>
  document.getElementById('mySlot').addEventListener('gladeAdFetched', function(event) {
    console.log('Ad Unit ' + event.target.getAttribute('data-ad-unit-path') +
      ' fired gladeAdFetched');
    console.log('Event Metadata: ' + JSON.stringify(event.detail));
  });
</script>

Metadata in detail

Field Name Description
empty Boolean value set to true if no ad was returned. False otherwise.
advertiserId The ID of the advertiser.
campaignId The ID of the campaign.
creativeId The ID of the creative.
lineItemId The ID of the line item.

Ad Rendered

The gladeAdRendered event fires when the ad's iframe load event has fired. The target of the event is the ad slot that fired it.

<div id='mySlot' data-glade data-ad-unit-path='/1234567/sports' width='720' height='90'></div>
<script async src='https://securepubads.g.doubleclick.net/static/glade.js'></script>
<script>
  document.getElementById('mySlot').addEventListener('gladeAdRendered', function(event) {
    console.log('Ad Unit ' + event.target.getAttribute('data-ad-unit-path') +
      ' fired gladeAdRendered');
  });
</script>

Advanced Usage

glade.run()

The script tag only needs to be included once per page. Once the tag has been included, the window property glade can be used. window.glade.run() can be called to fetch all unfetched slots that are defined. This is equivalent to inserting the script tag again, but will bypass any parsing, compilation, or execution costs associated with the additional script tag. A safe practice for using this method with async loading of GPT Light is:

window.glade && glade.run && glade.run();

This will call run() if the tag has already been loaded. If the script has not loaded, it will not execute anything. However, when the script loads, run() will be called automatically.

Send feedback about...

Google Publisher Tag