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.

Ad Placement

Unlike AMP web pages, where the amount and location of ads is designated by the placement of multiple amp-ad components, AMP Stories rely on a single amp-story-auto-ads component to dictate ad quantity and placement.

The amp-story-auto-ads extension is a wrapper around the amp-ad component that dynamically inserts one or multiple ads while the user consumes the story content. To ensure the best user experience:

  1. Ads are pre-rendered by the AMP Stories runtime, then inserted. This guarantees that the users will never be shown a blank or unloaded ad.

  2. Ad density is optimised with content ratio to prevent oversaturation. The amp-story-auto-ads extension decides when and where to insert ads as the user progresses.

The AMP runtime makes the ad call as early as possible and places the first one sometime after the first two pages, and never as the last page.

User Interaction

Users can progress past ads the same way as normal story pages; by tapping the right two thirds of the screen.

Users can progress past ads by tapping the right two thirds of the screen.

Users can interact directly with the ad by tapping the system rendered call to action button that appears in the bottom third of all AMP Story ads. Tapping on the button could send the user to one of the following locations, configured by the ad creator:

  • An AMP web page
  • A non-AMP web page
  • The App Store or Google Play Store
  • A Sponsored Story

Users are redirected to an ad landing destination, but can return to the story.

Configure

AMP Stories cannot support an amp-ad directly on the page. Instead, all ads are fetched and displayed by the amp-story-auto-ads extension. The amp-story-auto-ads component must be placed as a direct child element of amp-story.

<amp-story>
  <amp-story-auto-ads>
    <script type="application/json">
      {
        "ad-attributes": {
          // ad server configuration 
        }
      }
    </script>
  </amp-story-auto-ads>
  <amp-story-page>
  ...
</amp-story>

Unlike a normal amp-ad, no <fallback> or <placeholder> is required, as AMP Story ads will only be displayed once fully rendered.

Integrate Ad Server Support

The easiest way to include ads in your AMP Story is by serving ads from a supported ad server.

Ad servers that currently support AMP Story ads:

If you are an add server interested in serving story adds please contact us by filing a GitHub Issue. The AMP team will happily get in touch!

Publishers can also place custom ads if they set up their own ad server. The process is detailed here.

Ad server information is designated within the amp-story-auto-ads component at the start of the AMP story.

You must specify a JSON configuration object within the amp-story-auto-ads component that specifies how ads should be fetched and displayed.The following fields are required to serve and ad with Google Ad Manager:

  • "type" must be specified as "doubleclick"
  • "data-slot" must be paired with your ad unit
<amp-story>
  <amp-story-auto-ads>
    <script type="application/json">
      {
        "ad-attributes": {
          "type": "doubleclick",
          "data-slot": "/30497360/a4a/amp_story_dfp_example"
        }
      }
    </script>
  </amp-story-auto-ads>
  <amp-story-page>
  ...
</amp-story>

These key value pairs are copied over to the amp-ad element generated for the Story. Additional information needed for the element can be added in place of additional_data, such as targeting.

<amp-story>
  <amp-story-auto-ads>
    <script type="application/json">
     {
       "ad-attributes": {
         "type": "doubleclick",
         "data-slot": "/30497360/a4a/amp_story_dfp_example",
         "additional_data": "additional_data_information"
       }
     }
    </script>
  </amp-story-auto-ads>
  <amp-story-page>
  ...
</amp-story>