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>

Potrzebujesz dodatkowych wyjaśnień?

Jeśli przedstawione tutaj wyjaśnienia nie odpowiadają na wszystkie pytania, skontaktuj się z innymi użytkownikami AMP, aby omówić daną przykładową realizację.

Przejdź do Stack Overflow

Niewyjaśniona funkcja?

Zdecydowanie zachęcamy do wzięcia udziału! Choć mamy nadzieję, że staniesz się stałym uczestnikiem naszej społeczności open source, to z wdzięcznością przyjmiemy również każdy jednorazowy wkład w kwestie, które są Twoją pasją.

Edytuj przykład na GitHub

Written by @sebastianbenz