Table of contents

Monetizing your AMP page with ads

Important: this documentation is not applicable to your currently selected format stories!

This guide provides instructions and best practices for displaying ads on your AMP pages.

Adding ads to your page

In non-AMP pages (traditional HTML), if you want to display ads on your page, you'd include a snippet of JavaScript to serve ads from your ad network. For performance and security reasons, you cannot include third-party JavaScript in AMP pages. So, to display ads in AMP, you need to add the custom amp-ad component to your AMP page.

TIP – See AMP By Example for a live demo that demonstrates adding an amp-ad tag to an AMP page.

Let's walk through the steps of adding the component so you can display ads on your AMP page.

Step 1: Add the amp-ad script

The amp-ad component is a custom ad extension to the AMP library. Under the hood of amp-ad is custom JavaScript that's carefully designed to optimize performance. To run the amp-ad component, you must add the required JavaScript for this component in the head section of your AMP page:

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

Step 2: Add the amp-ad tag to your AMP page

Over 100+ ad servers and networks provide built-in integrations with AMP. To add an ad for a given ad network, add the amp-ad tag, and specify the network in the type attribute.

In this example, we are adding an ad slot to serve ads from the a9 network:

<amp-ad type="a9">
</amp-ad>

Step 3: Specify the size of the ad unit

Add the width and height attributes to the amp-ad tag. This specifies the size of the ad on your AMP page:

<amp-ad type="a9">
   width="300" height="250"
</amp-ad>

Step 4: Set ad network parameters

Each network has specific data attributes they require to serve ads. Refer to the ad network's amp-ad documentation and add the attributes that are needed In the following example, the a9 network requires additional parameters to specify the size of the ad, and other details:

<amp-ad type="a9"
    width="300" height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
</amp-ad>

Step 5: (Optional) Specify a placeholder

Depending on the ad network, you can choose to show a placeholder until the ad is available for viewing. This provides a better user experience by preventing a blank space. To specify a placeholder, add a child element with the placeholder attribute. Learn more in Placeholders & fallbacks.

<amp-ad type="a9"
    width="300" height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
   <amp-img placeholder src="placeholder-image.jpg"></amp-img>
</amp-ad>

Step 6: (Optional) Specify a fallback

Depending on the ad network, you can choose to show a fallback element if no ad is available to serve. To specify a fallback, add a child element with the fallback attribute. Learn more in Placeholders & fallbacks.

<amp-ad type="a9"
    width="300" height="250"
    data-aax_size="300x250"
    data-aax_pubname="test123"
    data-aax_src="302">
   <amp-img fallback src="fallback-image.jpg"></amp-img>
</amp-ad>

Congratulations! You are now serving ads on your AMP page!

Serving direct-sold AMPHTML ads

The amp-ad component serves ads from the network you specify. Those ads can be standard HTML ads or AMPHTML ads, provided that the ad network supports AMPHTML ads. To serve your direct-sold ads as AMPHTML ads, create the ad in AMP HTML according to the AMPHTML ad spec requirements and use an ad server that serves AMPHTML ads.

Augmenting targeting data on ad requests

As part of the Fast Fetch serving mechanism, the Real-Time Config (RTC) feature allows publishers to augment ad requests with first-party and third-party targeting information that's retrieved at runtime. RTC allows up to 5 callouts to targeting servers for each individual ad slot, the results of which are appended to the ad request. To use RTC on your ads, the ad network you use must support RTC and Fast Fetch.

You can learn more about RTC from this YouTube video:

Watch Effective AMP Monetization with Header Bidding.

Or, learn more from these RTC resources:

Best practices

Here are some tips to maximize the effectiveness of ads on your AMP pages:

Placement & controls: optimize your ad placements

Place the same number of ads on AMP Pages as your non-AMP pages to generate maximum revenue per page.
Place the first ad immediately below the first viewport ("below the fold") to provide an optimal user experience.
Unless you're using advanced CSS or media queries, ensure your ad units are centered on the page to provide your users with an optimal mobile web experience.
Enable multi-size ad requests on your AMP inventory to increase ad auction pressure and drive revenue.

Demand & pricing: get the right price for your ads

Sell ad units on your AMP pages across all sales channels, including direct and indirect to maximize competition for your inventory on AMP pages.
Price your ad inventory on AMP pages similar to your inventory on non-AMP pages. Monitor performance and adjust pricing accordingly.
Ensure all ad demand channels are competing for ad inventory on your AMP pages to drive up competition.

Ad types: Serve the best types of ads

Avoid heavy creatives per IAB guidelines.
Avoid interstitials or other ad formats that cause the content to reflow on ad load.
Optimize for viewability by setting the data-loading-strategy to prefer-viewability-over-views.
Place ads in your video content via supported players or amp-iframe to enable revenue on all types of content.
Implement native ads to compete with display ads using multi-sized ad requests, adding demand pressure while providing your readers with a premium user experience.

Innovation: Offer the most engaging ad products

Implement ads on ancillary AMP pages to generate incremental revenue:
- Ads in a carousel
- Ads in a lightbox
- ... and more
Implement new formats for direct sold ads to equip your sales team with high-impact, innovative ad products:
- Sticky Ads
- Flying Carpet