Traffic custom creatives in AMP Stories

Use Ad Manager to traffic custom creatives on AMP Story pages. AMP Stories is an open source ad format for visual storytelling. They can be run on platforms such as Google Search, or your owned and operated (O&O) properties.

AMP Stories support single page ads, where the ad appears as a full page in between AMP Story content.

Learn more about AMP Stories:

AMP Stories are only available for direct-sold inventory and not for Ad Exchange inventory.

Configure an AMP page for an AMP Story

You cannot use an <amp-ad> element to display a single page ad within an AMP Story. Instead, use these instructions to tag your page using the  <amp-story-auto-ads> element.

Traffic custom creatives in AMP Stories

AMP Story pages give publishers and advertisers rich capabilities to express their brand or service by showing images or video using custom creatives in Ad Manager.

  1. In Ad Manager, start creating a custom creative as you normally would, and select AMP as the HTML type.
  2. Enter your creative code in the Code snippet box. Include the following <meta> tags to insert a CTA button that takes users to a landing page when clicked.
    Other AMP extensions such as amp-sidebar or amp-accordion can still render on an AMP Story page, but the CTA buttons are the only clickable element.
    • amp-cta-url: The landing page URL for the CTA button. Anchor tags aren't supported; instead, insert a value using the click macro (%%CLICK_URL_UNESC%%) and destination macro (%%DEST_URL%%).
    • amp-cta-type: The CTA button type, which must be configured from a predefined set of choices.
    For example: 
    <!DOCTYPE html>
<html amp4ads>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <meta name="amp-cta-url" content="%%CLICK_URL_UNESC%%%%DEST_URL%%">
  <meta name="amp-cta-type" content="EXPLORE">
  <style amp4ads-boilerplate>
     body{visibility:hidden}
 </style>
  <style amp-custom>
    amp-img {height:100vh;}
    amp-img img {object-fit: contain}
  </style>
  <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
</head>
<body>
  <amp-img src=%%FILE:JPG1%% layout="fill" height="1280" width="720"></amp-img>
</body>
</html>
  3. Select 1x1 as the target ad unit size.

Pass additional attributes

To pass additional data (e.g. targeting information) as attributes to the created <amp-ad> tag, use these instructions to add the additional key value pairs to the ad-attributes JSON object.

Was this helpful?
How can we improve it?