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>

Wünschst du eine genauere Erklärung?

Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.

Zu Stack Overflow wechseln

Ein Feature wurde nicht erklärt?

Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.

Beispiel auf GitHub bearbeiten

Written by @sebastianbenz