Traffic custom creatives in Web Stories

Use Ad Manager to traffic custom creatives on Web Stories. Web 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.

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

Learn more about Web Stories:

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

Configure a Web Story

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

Traffic custom creatives in Web Stories

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

  1. Sign in to Google Ad Manager.
  2. Create a custom creative, and select AMP as the "Code type".
  3. Enter your creative code in the "Code" box. Include <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 a Web Story, 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>
  4. Select 1x1 as the target ad unit size.
  5. Configure the details and click Save.

Pass additional attributes

To pass additional data (e.g. targeting information) as attributes to the created <amp-ad> tag, read the Web Story auto ads developer documentation to add the additional key value pairs to the ad-attributes JSON object.

Was this helpful?
How can we improve it?