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:
- Advertise in Web Stories
- Create your first Web Story
- Best practices for creating a Story ad
- Advertising support in 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.
- Sign in to Google Ad Manager.
- Create a custom creative, and select AMP as the "Code type".
- 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 asamp-sidebaroramp-accordioncan 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.
<!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> - Select 1x1 as the target ad unit size.
- 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.
