#BlackLivesMatter
AMP
  • websites

amp-ad

Introduction

How to display ads in your AMP HTML files.

Setup

Import the amp-ad component in the header.

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

Basic usage

amp-ad requires width and height values. Select an ad network via the type argument.

<amp-ad width="300"
  height="250"
  type="a9"
  data-amzn_assoc_ad_mode="auto"
  data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
  data-recomtype="async"
  data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5">
</amp-ad>

Placeholder

Optionally amp-ad supports a child element with the placeholder attribute. If supported by the ad network, this element is shown until the ad is available for viewing.

Placeholder here!!!
<amp-ad width="300"
  height="200"
  type="doubleclick"
  data-slot="/4119129/doesnt-exist">
  <div placeholder>
    <b>Placeholder here!!!</b>
  </div>
</amp-ad>

Fallback

amp-ad supports a child element with the fallback attribute. If supported by the ad network, this element is shown if no ad is available for this slot.

Thank you for trying AMP!

You got lucky! We have no ad to show to you!

<amp-ad width="300"
  height="200"
  type="doubleclick"
  data-slot="/4119129/doesnt-exist">
  <div fallback>
    <p>Thank you for trying AMP!</p>
    <p>You got lucky! We have no ad to show to you!</p>
  </div>
</amp-ad>
Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow
Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub