#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
  • stories

Publisher Served AMP Story Ads

Introduction

In an AMP story, you cannot put an amp-ad directly onto the page, instead, all ads are fetched and displayed by the amp-story-auto-ads extension.

For the complete documentation please see our documentation on Github.

<!doctype html>
<html 
  lang="en">
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="https://amp.dev/documentation/examples/advertising-analytics/publisher_served_amp_story_ads/index.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Publisher Served AMP Story Ads</title>

  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Setup

Import the amp-story-auto-ads component.

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

Configuration

Include the amp-story-auto-ads tag on your page.

Its first child should be a script tag with a JSON configuration object

that contains details for how ads should be fetched and displayed.

ad-attributes is a map of key-value pairs, which correspond to the

attributes of the amp-ad element to be inserted.

<amp-story-auto-ads>
  <script type="application/json">
    {
      "ad-attributes": {
        "type": "custom",
        "data-url": "https://ampbyexample.com/json/amp-story-auto-ads/"
      }
    }
  </script>

After the script tag then inline any templates that you wish to include.

These templates will be populated by a JSON response from the

server indicated by the data-url key above.

This first example template would be used to create a simple ad with a

full size background image.

<template type="amp-mustache"
  id="image-template">
  <amp-img class="fill-img"
    layout="fill"
    src="{{imgSrc}}"></amp-img>
</template>

The second template is designed for a full screen video. You may

structure the templates however you wish, as long as they are valid

AMPHTML.

<template type="amp-mustache"
  id="video-template">
  <amp-video autoplay
    loop
    width="400"
    height="750"
    poster="{{poster}}"
    layout="fill">
    <source src="{{videoSource}}"
      type="video/mp4">
  </amp-video>
</template>

See the full example below:

Besoin de plus amples explications ?

Si les explications de cette page ne répondent pas à vos questions, n'hésitez pas à contacter d'autres utilisateurs d'AMP pour discuter de votre cas d'utilisation spécifique.

Se rendre sur Stack Overflow
Une fonctionnalité n'a pas encore été expliquée ?

Le projet AMP encourage fortement votre participation et vos contributions ! Nous espérons que vous deviendrez un membre régulier de notre communauté open source, mais nous serons également ravis de recevoir des contributions ponctuelles concernant les questions qui vous intéressent particulièrement.

Modifier l'exemple sur GitHub