Storyteller • Documentation • Ads

Developers / Web SDK / Ads

The Storyteller SDK makes it possible to render ads inside the Stories in your site. The behavior of the SDK regarding ads can be configured in the CMS for your tenant. There are 3 possible sources of ads:

No Ads - The SDK will not request or render ads.
Storyteller - The SDK will request Ads from the Storyteller API. These ads can be configured in the Storyteller CMS for your tenant.
Integrating App - The app into which you are integrating the Storyteller SDK is responsible for supplying configuration to fetch ads from a 3rd party ad server. The mechanism for doing so is described below.

Supplying Ads to the Storyteller SDK

To supply ad configuration to the Storyteller SDK, implement the getAdConfig callback on the StorytellerListViewDelegate. Multiple 3rd party ad servers are supported, with Google Ad Manager being the default. Get in touch for more information about configuration for other ad servers via [email protected].

For example:

{
  getAdConfig: () => {
    return {
      slot: '/30497361/your_ad_unit',
      frequency: 2
    };
  };
}

slot: this is the ID of your GAM ad unit in the form /[NETWORK_CODE]/[UNIT_CODE]. This Ad Unit must be set to serve 1x1 ads. There is more information available here from Google regarding custom ad creative and programmatic ad creative
frequency: this is the frequency that ads will appear - if set to 1 ads will appear in every Story, setting to 3 will display ads in every 3rd Story, etc. The default value is 2

Note that if you implement this method but your tenant is configured to supply ads via another method (or set to "No Ads"), then the results of this callback will be ignored.

Configuring Auto-Advancing Ads

By default, users will have to manually skip Ad pages. Alternatively, Ads can be configured to auto-advance after a set amount of time. This can be done by adding the data-auto-advance-after attribute to the body of your ad:

<body data-auto-advance-after="10s">

The content of this attribute must be in the format shown above, with the number of seconds the Ad should play for.

Ads containing an <amp-video> element will auto-advance after the video finishes playing. To stop the Ad from auto-advancing, add the loop attribute to the <amp-video> element

Working with Users Forward Arrow