Traffic custom creatives in Web Stories

Use Ad Manager to traffic custom creatives on Web Stories, an open source ad format for visual storytelling. Web Stories 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:

You can also activate programmatic demand for Web Stories.

Configure a Web Story

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

Traffic custom creatives in Web Stories

Web Stories give publishers and advertisers the ability to use images or video with 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 learn about additional key value pairs for the ad-attributes JSON object.

 

Was this helpful?
How can we improve it?

Need more help?

Sign in for additional support options to quickly solve your issue