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:
- Advertise in Web Stories
- Create your first Web Story
- Best practices for creating a Story ad
- Advertising support in 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.
- 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-sidebar
oramp-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.
<!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 add the additional key value pairs to the ad-attributes
JSON object.