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>

Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow

Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub

Written by @sebastianbenz