Implementation guide

Ads on AMP pages

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

How to show ads on AMP pages with amp-ad, Auto ads and a sticky bar, in AdSense and Ad Manager.

AdSense
Ad Manager
mobile and desktop (on AMP pages)

Learn the format Check my site

Desktop

Mobile

Understand it in 1 minute

What ads on AMP pages are

AMP is a way to build very light and fast pages, created as an open project. Imagine a lunch box with compartments: everything has its own little spot and you cannot throw just anything in there. An AMP page is the same. You cannot paste just any ad code. Instead, you use ready-made pieces, called components, that already know how to request and show ads without making the page heavy.

There are three main pieces. The amp-ad is the regular ad space, like a banner: you say the network type, adsense for AdSense or doubleclick for Ad Manager, and provide the width and height. The amp-auto-ads is the automatic mode: it receives a configuration from the network and chooses on its own where to place ads, respecting a maximum number and a minimum distance between them. The amp-sticky-ad is the strip that stays pinned to the bottom of the screen, like an anchor, and has a close button.

The ad network's code does not run directly on the page. It runs in a separate little box, called an iframe, which AMP itself controls. If no ad arrives, AMP tries to hide the empty space, but it does not hide a space that is on screen, so the page does not jump. AMP ads also cannot sit inside fixed-position boxes, except AMP's own sticky ads and the amp-lightbox.

Google explains that AMP is an open project that aims for fast pages with good performance on any device. In AdSense, you create an ad unit and choose the AMP code, or turn on Auto ads for AMP. In Ad Manager, you generate AMP tags straight in the dashboard, and Google recommends using HTML ads for AMP. It is worth using if your site already has AMP versions of the pages and you want them to show ads too.

Step by step

How to implement

Load the components in the headPut the amp-ad script in the head of the AMP page. If you use Auto ads or the sticky strip, also add the amp-auto-ads and amp-sticky-ad scripts.
AdSense: create an AMP unitIn AdSense, click Ads, By ad unit and Display ads. Give it a name, keep Responsive, click Save and get code and click AMP. The script goes in the head and the ad code goes in the body.
AdSense: turn on Auto ads for AMPUnder Ads, click Do you have an AMP site?, turn on Auto ads for AMP and click Get AMP code. Paste the script in the head and the code right after the opening of the body on each page. Then click Done and Apply.
Ad Manager: generate the AMP tagClick Inventory and then Ad units, open the unit and go to the Tags tab. Choose AMP tag and click Continue. Check AMP placeholders to include the reserved space and fallbacks, and choose the unit sizes.
Link the AMP page to the regular oneOn the regular page, point to the AMP version with the amphtml markup. On the AMP page, point back to the regular one with the canonical markup.
Wait and checkAds can take a few minutes and, sometimes, up to an hour to appear.

Implemented example

The code and how it looks on screen

The component scripts go in the head; the amp-auto-ads goes right after opening the body, and the other ads go in the body, where they should appear.

<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>

On desktopThe amp-ad takes up the space with the set width and height, like a regular banner. The amp-sticky-ad strip stays pinned at the bottom, at full width and at most 100 pixels tall.

On mobileThe AdSense responsive unit takes the width of the screen. The sticky strip stays at the bottom, can be closed, and when the end of the page is reached AMP adds extra space so it does not cover the content.

What Google recommends

Do and don't

Allowed

Use amp-ad with the adsense or doubleclick type, providing width and height.
Use AdSense responsive units, which Google recommends keeping selected.
Use amp-auto-ads with AdSense and turn off, in the dashboard, the formats you do not want on AMP pages.
Have one amp-sticky-ad strip per page, with a single amp-ad inside.
Show a placeholder while the ad loads and a fallback when it does not arrive.
In Ad Manager, refresh AMP ads that use Fast Fetch, with a minimum interval of 30 seconds.

Not allowed

Place amp-ad inside fixed-position boxes, except for sticky ads and amp-lightbox.
Have more than one amp-sticky-ad on the same page.
Use a transparent or semi-transparent background on the sticky strip. AMP swaps it for a solid color.
Serve ads or embeds without HTTPS.
In Ad Manager, turn on refresh together with single request architecture (SRA). Refresh is turned off and an error appears.
Use amp-ad directly in a Web Story. Web Stories use amp-story-auto-ads.

Tips

To do it right

Put the amp-auto-ads as the first item inside the body.
The maximum height of the sticky strip is 100 pixels, and the width is always 100 percent.
In multi-size units that refresh, Ad Manager only requests sizes equal to or smaller than the current one, so the ad can shrink over time.
To track results in AdSense, use the Content platform breakdown in the reports.

Watch out

Common errors

Script outside the head

Each component's script goes in the head, and the ad goes in the body. Without the right script, the component does not work.

Copying sample code

AdSense gives you the ready-made AMP code when you choose the AMP option. Copy the code from your account, with your publisher ID.

Sticky strip built wrong

The amp-sticky-ad needs the nodisplay layout and a single amp-ad inside it.

Loose AMP page

AdSense asks that the regular page and the AMP page point to each other, with the amphtml and canonical markups.

Frequently asked questions

Can I use the regular AdSense code on an AMP page?

Use the AMP code. On AMP pages, the ad network's JavaScript does not run directly on the page, but in an iframe controlled by AMP.

What happens if no ad comes?

AMP tries to hide the space. If it cannot, it shows the fallback. The sticky strip with no ad does not appear.

Does Ad Manager refresh ads in AMP?

Yes, for Fast Fetch ads. You put a markup in the head with the interval, at least 30 seconds, per page or per slot. It does not work together with SRA.

How long does it take for ads to appear?

Usually a few minutes, and sometimes up to an hour.

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