Implementation guide

Ad Manager display ad

Display ad slots (Google Publisher Tag)

The classic Ad Manager ad space, created with the Google Publisher Tag, with a fixed size, several sizes or responsive.

Ad Manager
mobile and desktop

Learn the format Check my site

Desktop

Mobile

Understand it in 1 minute

What an Ad Manager display ad is

The Ad Manager display ad is the ad rectangle that sits still inside the page: in the middle of the text, at the top or on the side. Think of a poster hanging on the school wall. It has a set place and a set size, and everyone who walks by can see it. In Ad Manager, this reserved place is called a slot, which is just the English word for ad space. The one that requests and shows the ad in this space is GPT, short for Google Publisher Tag, a Google code library that you add to your site.

It works like this: first you tell GPT which Ad Manager ad unit to use, which sizes fit there and in which box of the page it should appear. This box is a div, a piece of HTML with a unique name. Then GPT requests the ad and draws it inside the box. The box name must be the same in both places. If it is not, the ad does not show. Google itself tells you to check this when the ad does not show.

The size can be chosen in three ways. With a fixed size, only ads of that measurement come in, such as 300 by 250. With multiple sizes, you list several measurements and Ad Manager can pick any of them. With responsive, you build a table called size mapping, which says which measurements apply for each screen width: one list for large screens and another for small screens. There is also the fluid size, which stretches to the page width, but Google explains that today it is used only for native ads.

Google created this way of working so the site has control: you decide where each ad lives, which sizes it accepts and when it loads. The documentation teaches you to let the ads at the bottom of the page load only when the person gets close to them, which is called lazy loading. It also explains how to refresh an ad without reloading the whole page, following timing and disclosure rules. The display ad is worth using when you already have an Ad Manager account and want to carefully choose the place and size of each space.

Step by step

How to implement

Generate the tag in Ad ManagerIn Ad Manager, click Inventory and then Ad units. Open the unit, go to the Tags tab, choose Google Publisher Tag (GPT) and click Continue. Make the other choices and copy the tags under Tag results.
Load GPT in the headPut the GPT script inside the head part of the page. It brings Google's ad tools to the site.
Define the slotStill in the head, tell GPT the ad unit path, the accepted sizes and the div name. If you want a responsive slot, add a size mapping. At the end, enable the ad service.
Create the div with reserved spaceIn the body, create the div with the same name used in the definition. Give it height and width in CSS, based on the largest ad, so nothing jumps on the screen when the ad arrives.
Request the adRight after the div, call the display with the div name. For ads from your own inventory to show up, you need an active line item with the status Ready.
Lazy loading and refreshIf you want, turn on lazy loading for the spaces at the bottom of the page. If you are going to refresh ads, declare this in Ad Manager under Inventory, Inventory rules, Publisher declarations, and use the same rule on the page.

Implemented example

The code and how it looks on screen

GPT and the slot definition go in the head; the div with the display call goes in the body, in the place where the banner should appear.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>

On desktopIt appears as a still rectangle in the place you chose, for example 728 by 90 or 300 by 250. It scrolls with the page, like any part of the text.

On mobileIt appears in the middle of the content, in sizes that fit the screen, such as 300 by 250. With size mapping, the phone receives only the sizes you allowed for small screens.

What Google recommends

Do and don't

Allowed

Set a fixed size, a list of several sizes or a size mapping by screen width.
Reserve in CSS the space for the largest size that can show up. Google says this is the most effective way to keep the page from jumping.
Define in the head the spaces that appear right away, so they get priority.
Use lazy loading on spaces below the fold, which only appear when the person scrolls the page.
Refresh ads with GPT's refresh function, instead of reloading the whole page, as long as the refresh is declared in Ad Manager.
Refresh on the person's action with no minimum time, since Google only requires a minimum interval for refresh by time or by event.

Not allowed

Use a different name on the div than the one passed in the slot definition.
Refresh ads without declaring it in Ad Manager, or declare it incorrectly. Google treats this as a violation.
Refresh by time or by event with an interval shorter than 30 seconds on the web.
Clear the space before refreshing. The refresh already swaps the ad, and clearing only leaves the space blank for longer.
Refresh spaces the person never sees. Google warns that this can greatly lower the viewability rate.
Leave the div without reserved dimensions, which makes the content jump when the ad arrives.

Tips

To do it right

In a slot with several sizes, Google asks that the div have the height of the tallest ad and the width of the widest ad.
In size mapping, GPT picks the largest matching screen range, looking at width first and then height. If the mapping has an error, it falls back to the sizes from the slot definition.
In the official lazy loading example, Google fetches ads 5 screens away, renders at 2 screens and doubles those values on mobile.
To refresh only after the ad has been seen, the documentation suggests waiting for the viewable impression event, called impressionViewable.

Watch out

Common errors

Different div name

The name passed in the slot definition and in the display must be the same as the div's. When it is not, the ad simply does not appear.

Div size different from the ad

Google asks that the width, height and div name match what is in the tag. If they do not match, the ad may not show.

No Ready line item

Without an active line item with Ready status, your own inventory does not show an ad, even with the right code.

Mapping that empties mobile

In Google's example, screens smaller than 640 by 480 get an empty list and end up with no ad. If you copy it without adjusting, phones held upright can end up with no banner.

Frequently asked questions

What is the difference between multiple sizes and responsive?

With multiple sizes, any measurement in the list can appear on any screen. With responsive, the size mapping says which measurements apply for each screen width.

Can I use the fluid size on a regular banner?

Google explains that today the only fluid type Ad Manager accepts is the native ad. For a regular banner, use a fixed size, multiple sizes or mapping.

What is the minimum time to refresh an ad?

On the web, refresh by time or by event needs at least 30 seconds. Refresh by the person's action has no minimum. In all cases, it must be declared in Inventory rules.

Is lazy loading worth it?

Google recommends deferring spaces below the fold, which helps mainly on mobile, where resources are smaller. Spaces at the top should get priority.

Library

Official Google source

Everything on this page follows Google's official documentation. Read it straight from the source:

Does your site use this format the right way?

The audit reads the site as a visitor would, without clicking anything, and shows what to fix.

Run an audit