Advertise in Web Stories

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:

1. 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.

2. 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.

User Interaction

Users can progress past ads the same way as normal story pages; 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).

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.

• Written by @CrystalOnScript