AMP Stories are a full-screen tappable experience that immerses readers in the content. Ads that appears in AMP Stories should have a consistent and cohesive design with the AMP Stories UX. This prevents a jarring or interruptive user experience. This guide demonstrates how to build an ad for AMP Stories.

AMP Story ad principles

Current ad formats, such as banners and boxes, do not integrate well with the AMP Story format. Classic ads are slow, interruptive, and feel out of place within the Story experience.

AMP Story ads conform to the following principles:

  • Valid AMPHTML Ad: follow the same technical specification as a classic AMPHTML ad.
  • Visual first: Inviting, bold, context-driven invitation state.
  • Native: The ad page has the same dimensions as an organic story page.
  • Same interaction model: User can continue to the next screen just like they would with an organic story page.
  • Fast: The ad never appears to a user in a half-loaded state.

To be consistent with these principles, the AMP Story runtime determines the right placement of an ad page amidst the AMP Story. Read more about ad placement mechanics in Advertise in AMP Stories.

Sample Story ad

AMP Story ads are AMPHTML ads, but have required meta tag data, meet defined layout specifications and required UI elements. An AMP Story ad will always include a call to action(CTA) button and an ad label displayed as a text disclaimer at the top of the page.

Example of an AMP Story ad

To keep the user experience consistent, the AMP Story runtime is responsible for rendering the ad label and the CTA button.

Meta tag data

Meta tag data specifies that the ad meets the AMP Story format, sets the CTA button text enum, directs where the button will send the user and what type of page it is.

<html amp4ads>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1">

    <!-- Specifies where the user is directed -->
    <meta name="amp-cta-url" content="%%CLICK_URL_UNESC%%%%DEST_URL%%">

    <!-- Specifies the call to action button text enum -->
    <meta name="amp-cta-type" content="EXPLORE">

    <!-- Specifies what type of landing page the user is direct to -->
    <meta name="amp-cta-landing-page-type" content="NONAMP">

    <style amp4ads-boilerplate>body{visibility:hidden}</style>
    <style amp-custom>
     amp-img {height: 100vh}
    </style>
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
  </head>
  <body>
    <amp-img src=%%FILE:JPG1%% layout="responsive" height="1280" width="720"></amp-img>
  </body>
</html>

The amp-cta-type tag must include one of the available options for the CTA Button text enum. This ensures a consistent user experience for AMP Story readers.

Call to action button text enum

The call to action button must be configured from a predefined set of choices:

  • APPLY_NOW: "Apply Now"
  • BOOK_NOW: "Book"
  • BUY_TICKETS: "Buy Tickets"
  • DOWNLOAD: "Download"
  • EXPLORE: "Explore Now"
  • GET_NOW: "Get Now"
  • INSTALL: "Install Now"
  • LISTEN: "Listen Now"
  • MORE: "More"
  • OPEN_APP: "Open App"
  • ORDER_NOW: "Order Now"
  • PLAY: "Play"
  • READ: "Read Now"
  • SHOP: "Shop Now"
  • SHOWTIMES: "Showtimes"
  • SIGN_UP: "Sign Up"
  • SUBSCRIBE: "Subscribe Now"
  • USE_APP: "Use App"
  • VIEW: "View"
  • WATCH: "Watch"
  • WATCH_EPISODE: "Watch Episode"

If support is needed for a new CTA button text enum, please open a GitHub issue.

Ad Landing Page

You can specify one of three options for an AMP Story ad landing page.

  • STORY: Landing page is a sponsored story.
  • AMP: Landing page is a valid AMP Page.
  • NONAMP: Any other type of webpage.

Layout

AMP Stories are horizontal and full-screen. Story ads are required to match this format to provide a consistent user experience.

Overlay dimensions

The ad label overlays a dark gradient bar across the entire width of the ad and will stretch from the top to 46px down.

The ad overlay sits at the top

The CTA sits 32px from the bottom and is centered horizontally. It is 120px by 36px.

The CTA Button sits near the bottom

Images and video

Images and video included in an AMP Story ad should be 4:3 standard full-screen. Ads that include video should use a poster. The recommended dimensions for a poster image are 720p (720w x 1280h) .

<amp-video controls
  width="720"
  height="1280"
  layout="responsive"
  poster="images/kitten-playing.png">
  <source src="videos/kitten-playing.webm"
    type="video/webm" />
  <source src="videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Images

Background images can be scaled to full screen. The following CSS is a successful way to crop and center videos and images.

<style amp-custom>
    amp-img, amp-video {
        height: 100vh;
    }
    amp-video video {
        object-fit: cover;
    }
    amp-img img{
        object-fit: cover;
    }
</style>

Video

Specify <source> vs src

When specifying the source for an amp-video, use <source>child elements instead of the src attribute. By using the <source> element, you can specify the video type, as well as add more video sources. In the <source> element, specify the MIME type via the "type" attribute. For HLS videos, you must specify one of the following MIME types: application/x-mpegurl or application/vnd.apple.mpegurl. For all other videos, specify the video/ MIME prefix and the video format (e.g., "video/mp4").

Example: Specifying multiple source files

<amp-video id="video-page1" autoplay loop
  layout="fill" poster="https://example.com/media/poster.jpg">
  <source src="https://amp-example.com/media/movie.m3u8"
    type="application/vnd.apple.mpegurl" />
  <source src="https://amp-example.com/media/movie.mp4"
    type="video/mp4" />
</amp-video>

Size & Length of video

For optimal performance, you should aim to provide videos that are no larger than 4 MB. Smaller file sizes allow for faster downloading, so keep things as small as possible.

Video formats

If you can only provide a single video format, provide MP4. However, where possible, use HLS video and specify MP4 as a fallback for browsers that do not yet support HLS video. HLS performs adaptive bitrate streaming, where the quality of the video can be altered to best suit the user's network connection.

Video resolution

AMP story videos are always vertical (i.e., portrait view), with an expected aspect ratio of 16:9. Use the recommended resolution for the video streaming type:

Video streaming type Resolution
Non-adaptive 720 x 1280 px
Adaptive 720 x 1280 px
540 x 960 px
360 x 480 px

Video codec

  1. For MP4, use H.264.
  2. For WEBM, use VP9.
  3. For HLS or DASH, use H.264.

Video quality

Transcoding optimizations

There are various tools you can use to encode videos and adjust the quality of the video during encoding. Here are just a few:

Tool Notes
FFmpeg Recommended optimizations:
  • For MP4, use -crf 23.
  • For WEBM, use -b:v 1M.
avconv Recommended optimizations:
  • For MP4, use -crf 23.
  • For WEBM, use -b:v 1M.
Shaka Packager An encoder that can also output the HLS format including the playlist.
HLS segment size

Ensure the size of your HLS segments are typically no more than 10 seconds in duration.

A Sponsored Story exists as a URL on the web, enabling the drive of user traffic to a Sponsored Story from the call to action button on an AMP Story ad. A Sponsored Story is an AMP Story, but with focus on an immersive and expansive ad experience.

CTA button directs to a Sponsored Story

Read more about creating an AMP Story here.