Request Stand-Alone Ads via the Web SDK

This guide explains how to integrate stand-alone ads into your website.
It requires an installed FeedAd SDK and therefore access to the feedad object. Read the installation guide if you have not initialized the SDK, yet.

Implementation

All asynchronous operations happening in the Web SDK are implemented as Promises and can be observed as such.

You can find a detailed example integration inside the example project's 'standalone' folder.

The ad request can be separated into four steps:

1. Initialize the SDK

You have to initialize the FeedAd SDK before requesting any ad.

feedad.init("your-web-client-token");

2. Request a placement

feedad.requestStandaloneAd("your-placement-id")
      .then(function (adResponse) { 
      });

Placement ID?

You can choose placement IDs yourself. A placement ID should be named after the ad position inside your product. For example, if you want to display an ad inside a list of news articles, you could name it "ad-news-overview".
A placement ID may consist of lowercase a-z, 0-9, - and _. You do not have to manually create the placement IDs before using them. Just specify them within the code, and they will appear in the FeedAd admin panel after the first request. Learn more about Placement IDs and how they are grouped to play the same Creative

3. Add the ad to your page

The element holding the ad will be available through the adResponse.createAdContainer() property. You can add the element to your DOM to show the ad.

feedad.requestStandaloneAd("your-placement-id")
      .then(function (adResponse) {
          // the ad element
          var adElement = adResponse.createAdContainer();

          //insert the ad element
          var adContainer = document.getElementById("some-element");
          adContainer.appendChild(adElement);
      });

4. Listen for the ad completion

Once the ad element becomes visible, it will automatically start playing its creative. When the player has successfully played one creative, it will stay blank forever after. You should listen for the ad response's promise to be fulfilled and display your content afterwards.

feedad.requestStandaloneAd("your-placement-id")
      .then(function (adResponse) {
          // the ad element
          var adElement = adResponse.createAdContainer();

          //insert the ad element
          var adContainer = document.getElementById("some-element");
          adContainer.appendChild(adElement);

          // wait for the ad to finish
          return adResponse.promise;
      })
      .then(function () {
          // the ad was played
          displayContent();
      })
      .catch(function (e) {
          // there was no ad available or the playback failed
          console.log("error requesting ad", e);
          displayContent();
      });

You can find more information about the error callback within the Feed Ad integration docs.

Test your integration

Once you've setup all ad placements it is time to test the ad playback and error handling strategies.

Ad Request Options

You can provide additional options for the ad request:

feedad.requestStandaloneAd("your-placement-id", {
    connectionType: "3g",
    placementContext: "preroll"
});

The following keys and values are accepted by the options object:

Key	Value
connectionType	"unknown" (default) | "wifi" | "2g" | "3g" | "4g" Specifies the type of the connection so the ad server may filter out creatives with high bandwidth volume.
placementContext	"preroll" | "midroll" | "postroll" | "standalone" Specifies the context in which the ad is shown in relation to the main content.

Additional Ad Behavior

To apply additional behavior to the ad (e.g. sticky ad), read the decoration section of feed ads. The configuration is the same, and is specified inside the createAdContainer() method.