Publisher Served

Edit on Github
Open in Playground View Story

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>
<htmllang="en">
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="https://ampbyexample.com/stories/monetization/publisher_served/">
  <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 Ads for AMP Stories</title>

  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.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.

It's 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.

Example

    <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.

Example

<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.

Example

<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: