Permalink
Switch branches/tags
Find file Copy path
123 lines (97 sloc) 4.68 KB

Advertise in AMP Stories

AMP Stories are a full-screen tappable experience that immerses readers in the content. Advertising with AMP Story ads allows for seamless and disruption-free integration into the user’s journey, keeping them engaged and delighted by the platform.

For information on how to include ads in your AMP Stories, refer to our guide.

Best practices for creating an AMP Story ad

If you are interested in creating an ad for the AMP Story platform, refer to our best practices guide.

Publisher placed ads

This is an option for publishers who would like to place single page ads amidst AMP story content they produce. This is meant as a stop-gap until more robust ad server support is available.

This is done using the mechanism in Custom ad extension. The ads are rendered with inlined templates in the story document and the data for the templates is fetched remotely.

Template

An ad template must be written in amp-mustache. For example:

<template type="amp-mustache" id="template-1">
  <amp-img layout="fill" src="{{imgSrc}}"></amp-img>
  <amp-pixel src="{{impressionUrl}}"></amp-pixel>
</template>

A few important things to note:

  • Templates need to be inlined in the AMP story, as direct children of a <amp-story-auto-ads> element.
  • An element ID is required, so that the template can be referenced by the ad response.
  • The selected template ID will be set as an attribute of amp-ad: <amp-ad template="template-1">
  • The content inside a template should strictly follow the rules of amp-story-grid-layer
  • Be aware of the restrictions of amp-mustache.
  • Ads that use different templates can be styled separately using CSS attribute selector:
amp-ad[template=template-1] {
  background-color: blue;
}
amp-ad[template=template-2] {
  background-color: red;
}
  • The CTA (call-to-action) button should NOT be included in the template. Story defines a list of CTA buttons to select from. For details, read the "CTA ad" section below.

Ad response

Response payload

A server endpoint needs to provide ad responses in the following JSON format:

{
  "templateId": "template-1",
  "data": {
    "imgSrc": "https://cdn.adserver.com/img-12345.jpg",
    "impressionUrl": "https://adserver.com/track?iid=18745543"
  },
  "vars": {
    "ctaType": "EXPLORE",
    "ctaUrl": "https://advertiser.com/landing-123.html",
    "impressionId": "ac2d1s2E3B"
  }
}
  • templateId: the ID of the inlined template that is going to be used.
  • data: the data model to populate the selected template. The fields should match the variable names in the selected template.
  • vars: extra variables needed by the story. They will be added to the amp-ad element as data attributes, and picked by runtime for different use cases:
    • CTA button rendering (see details in the "CTA ad" section)
    • Provide dynamic content of the ad for tracking purpose (see details in the "tracking" section)

Response headers

The ad request is an AMP CORS request, hence a couple of custom response headers are needed. See AMP CORS spec for details.

Tagging

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.

Here is a full example using amp-story-auto-ads together with some templates inlined:

<amp-story>
  <amp-story-auto-ads>
     <script type=”application/json”>
        {
          "ad-attributes": {
            "type": "custom",
            "data-url": "https://adserver.com/getad?slot=abcd1234"
          }
        }
     </script>

     <template type="amp-mustache" id="template-1">
       <amp-img src="{{imgSrc}}"></amp-img>
       <amp-pixel src="{{impressionUrl}}"></amp-pixel>
     </template>

     <template type="amp-mustache" id="template-2">
       <div class="creative-line-1">{{creativeLine1}}</div>
       <div class="creative-line-2">{{creativeLine2}}</div>
       <amp-pixel src="{{impressionUrl}}"></amp-pixel>
     </template>
  </amp-story-auto-ads>
  ...

At runtime, an amp-ad element is dynamically inserted:

<amp-ad type="custom"
  data-url="https://adserver.com/getad?slot=abcd1234"
</amp-ad>

And an ad request is made to this URL: https://adserver.com/getad?slot=abcd1234. Each story can only have one amp-story-auto-ads element.