Storyteller React Native - GAM Integration

You can use this repo to integrate GAM Ads into the Storyteller integration in your React Native App.

Storyteller is also available in native implementations for iOS, Android and Web.

For help with Storyteller, please check our Documentation and User Guide or contact [email protected].

Installing the SDK

To install the package:

    npm install @getstoryteller/react-native-storyteller-sdk

Documentation

The rest of the documentation for this package is available in our Documentation.

Installing the GAM SDK

If you use Google Ad Manager as your ad server, we have a specific library for interacting with GAM using React Native.

To install the library:

  npm install @getstoryteller/react-native-storyteller-sdk-gam

Configuration

To use the library, first configure it with the correct values from GAM:

import React from 'react';
import StorytellerGAMAds from '@getstoryteller/react-native-storyteller-sdk-gam'

class App extends React.Component<any, AppState> {

  constructor() {
     const kvps = {
       "test_key": "test_value"
     };
     StorytellerGAMAds.configureStoryAds("NativeStoryAdFormatId", "StoryAdUnitId", kvps);
     StorytellerGAMAds.configureClipAds("NativeClipAdFormatId", "ClipAdUnitId", kvps);
  }

}

where:

• NativeStoryAdFormatId/NativeClipAdFormatId is the ID of the Native Ad Format for the respective Ad Placement
• StoryAdUnitId/ClipAdUnitId is the Ad Unit set to traffic creative using the relevant Native Ad Format
• kvps optionally pass targeting parameters to the ad request

Note: If you are only using one type of ads, you only need to call one configure method. For example, if you are not using Clips in your app, then you can call only StorytellerGAMAds.configureStoryAds.

Connect to the Storyteller SDK

Connect the fetchAds method to the Storyteller SDK GET_ADS_FOR_LIST event:

import React from 'react';
import { NativeEventEmitter, EmitterSubscription } from 'react-native';
import Storyteller from '@getstoryteller/react-native-storyteller-sdk';
import type { GetAdForListEvent } from '@getstoryteller/react-native-storyteller-sdk';
import StorytellerGAMAds, { StorytellerAd } from '@getstoryteller/react-native-storyteller-sdk-gam';
const { GET_ADS_FOR_LIST } = Storyteller.getConstants();

class App extends React.Component<any, AppState> {

  private adsListener: EmitterSubscription | null = null;

  constructor() {
     const kvps = {
       "test_key": "test_value"
     };
     StorytellerGAMAds.configureStoryAds("NativeStoryAdFormatId", "StoryAdUnitId", kvps);
     StorytellerGAMAds.configureClipAds("NativeClipAdFormatId", "ClipAdUnitId", kvps);
  }

  componentDidMount(): void {
    const storytellerEvt = new NativeEventEmitter(Storyteller);
    this.adsListener = storytellerEvt.addListener(GET_ADS_FOR_LIST, this._onGetAdsForList);
  }

  componentWillUnmount(): void {
    this.adsListener?.remove();
  }

  _onGetAdsForList = (event: GetAdForListEvent) => {
    StorytellerGAMAds.fetchAds(event)
    .then((value: Array<StorytellerAd>) => {
     var storytellerAd: AdResponse | null = null;
     const gamAd = value.length ? value[0] : null;
     if(!gamAd) {
       Storyteller.setAdsResult({ ads: [], error: null });
     }
     if (event.stories) {
       storytellerAd = {
         id: event.stories.story.id,
         ad: gamAd,
       };
     } else if (event.clips) {
       storytellerAd = {
         id: event.clips.clip.id,
         ad: gamAd,
       };
     }
     console.log(`Got ads\n` + `ads: ${JSON.stringify(storytellerAd)}`);
     Storyteller.setAdResult({ad: storytellerAd, error: null});
    }).catch((error) => {
      Storyteller.setAdsResult({ ads: [], error: error });
    })
  };
}

Ensure Ad Tracking behaves correctly

Now connect the onUserActivityOccurred method to the Storyteller SDK ON_USER_ACTIVITY_OCCURRED event:

import React from 'react';
import { NativeEventEmitter, EmitterSubscription } from 'react-native';
import Storyteller from '@getstoryteller/react-native-storyteller-sdk';
import { EventType } from '@getstoryteller/react-native-storyteller-sdk';
import type { GetAdForListEvent, UserActivityOccurredEvent } from '@getstoryteller/react-native-storyteller-sdk';
import StorytellerGAMAds, { ClientAd, EventType as GAMEventType } from '@getstoryteller/react-native-storyteller-sdk-gam';
const { GET_ADS_FOR_LIST, ON_USER_ACTIVITY_OCCURRED } = Storyteller.getConstants();

class App extends React.Component<any, AppState> {

  private adsListener: EmitterSubscription | null = null;
  private userActivityListener: EmitterSubscription | null = null;

  constructor() {
     const kvps = {
       "test_key": "test_value"
     };
     StorytellerGAMAds.configureStoryAds("NativeStoryAdFormatId", "StoryAdUnitId", kvps);
     StorytellerGAMAds.configureClipAds("NativeClipAdFormatId", "ClipAdUnitId", kvps);
  }

  componentDidMount(): void {
    const storytellerEvt = new NativeEventEmitter(Storyteller);
    this.adsListener = storytellerEvt.addListener(GET_ADS_FOR_LIST, this._onGetAdsForList);
    this.userActivityListener = storytellerEvt.addListener(ON_USER_ACTIVITY_OCCURRED, this._onUserActivityOccurred);
  }

  componentWillUnmount(): void {
    this.adsListener?.remove();
    this.userActivityListener?.remove();
  }

  _onGetAdsForList = (event: GetAdForListEvent) => {
    StorytellerGAMAds.fetchAds(event.listDescriptor, event.stories)
    .then((value: Array<ClientAd>) => {
     var adsMap = new Array<AdResponse>();
      const gamAds = value;
      event.stories.forEach((clientStory, index) => {
        if (gamAds.length > index) {
          adsMap.push({
            id: clientStory.id,
            ad: gamAds[index],
          });
        }
      });
      Storyteller.setAdsResult({ ads: adsMap, error: null });
    }).catch((error) => {
      Storyteller.setAdsResult({ ads: [], error: error });
    })
  };

 _onUserActivityOccurred = (event: UserActivityOccurredEvent) => {
   var eventType = null
     switch (event.type) {
       case EventType.AdActionButtonTapped:
         eventType = GAMEventType.adActionButtonTapped
         break
       case EventType.DismissedAd:
         eventType = GAMEventType.dismissedAd
         break
       case EventType.DismissedClip:
         eventType = GAMEventType.dismissedClip
         break
       case EventType.DismissedStory:
         eventType = GAMEventType.dismissedStory
         break
       case EventType.FinishedAd:
         eventType = GAMEventType.finishedAd
         break
       case EventType.OpenedAd:
         eventType = GAMEventType.openedAd
         break
     }
   if (eventType !== null && event.data.adId !== undefined) {
     StorytellerGAMAds.onUserActivityOccurred(eventType, { adId: event.data.adId })
   }
 };
}