amp-ad

Edit on Github
Open in Playground

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.

Example

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

Using Placeholders

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.

Example

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

Using Fallbacks

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.

Example

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>

For more amp-ad samples, check out the DFP ad test page.