Table of contents

Advertise in Web Stories

Important: this documentation is not applicable to your currently selected format email!

Web Stories are a full-screen tappable experience that immerses readers in the content. Advertising with Web Story ads allows for seamless and disruption-free integration into the user’s journey, keeping them engaged and delighted by the platform.

Ad Placement

Web Stories use a single amp-story-auto-ads component to dictate ad quantity and placement.

amp-story-auto-ads is a wrapper around the amp-ad component. It dynamically inserts one or multiple ads while the user consumes the story content. To ensure the best user experience:

Ads are pre-rendered by the Web Stories runtime, then inserted. This guarantees that the users will never be shown a blank or unloaded ad.
Ad density is optimised with content ratio to prevent oversaturation. The amp-story-auto-ads component decides when and where to insert ads as the user progresses.

A Web Story places the first ad sometime after the first two pages with the aim of optimizing monetization revenue and user experience.

NOTE – A longer Web Story will typically create more opportunities for ad placement. The exact placement of the ad algorithm will continue to be optimized over time.

User Interaction

Users can progress past ads the same way as normal story pages; by tapping the right two thirds of the screen.

Users can progress past ads by tapping the right two thirds of the screen.

Users interact directly with the ad by tapping the system rendered call to action button that appears in the bottom third of all Web Story ads. The button can be configured to send the user to an arbitrary URL (or to the relevant app store).

Users are redirected to an ad landing destination, but can return to the story.

Configure a Web Story for ads

Web Stories cannot support an amp-ad directly on the page. Instead, all ads are fetched and displayed by the amp-story-auto-ads component. The amp-story-auto-ads component must be placed as a direct child element of amp-story.

<amp-story>
  <amp-story-auto-ads>
    <script type="application/json">
      {
        "ad-attributes": {
          // ad server configuration
        }
      }
    </script>
  </amp-story-auto-ads>
  <amp-story-page>
  ...
</amp-story>

Unlike a normal amp-ad, no <fallback> or <placeholder> is required, as Web Story ads are only displayed once fully rendered.

Getting started with Story Ads

The easiest way to include ads in your Web Story is by serving ads from a supported ad server.

Ad platforms that currently support Web Story ads:

Google Ad Manager
- Direct sold ads
- Programmatic ads
Google AdSense
- Programmatic ads
MGID
- Direct sold ads
Other ad platforms can integrate (contact us for details via Github)

If you are an advertiser interested in running your ads inside Web Stories please reach out for more information.

Publishers can also place custom ads if they set up their own ad server. The process is detailed here.

Read Traffic custom creatives in Web Stories for information about uploading ads to Google Ad Manager and checkout our guide on Best practices for creating an AMP Story ad.

Written by @CrystalOnScript