AMP
IT
English Deutsch Français العربية Español Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Monetizing your AMP page with ads

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

Aggiungere gli attributi width e height al tag amp-ad. Specificare la dimensione dell'annuncio sulla pagina AMP:

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

Step 4: Set ad network parameters

Ogni rete dispone di specifici attributi di dati richiesti per fornire annunci. Consultare la documentazione per il componente amp-ad della rete di annunci e aggiungere gli attributi
richiesti. Nel seguente esempio, la rete a9 richiede parametri aggiuntivi per indicare la dimensione dell'annuncio e altri dettagli:

<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

Il componente amp-ad permette di fornire annunci dalla rete specificata. Questi annunci possono essere HTML standard o AMPHTML, a condizione che la rete pubblicitaria supporti gli annunci AMPHTML. Per offrire i propri annunci a vendita diretta sotto forma di annunci AMPHTML, occorre creare l'annuncio secondo i requisiti delle specifiche degli annunci AMPHTML e utilizzare un server in grado di pubblicare annunci AMPHTML.

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.
  • Implementare annunci nativi per competere con gli annunci su display, utilizzando richieste di annunci a più dimensioni, aumentando le richieste e fornendo ai lettori un'esperienza di utilizzo di qualità premium.

Innovation: Offer the most engaging ad products

Additional resources