set up sending screen events

Author: rwang-fs

example/App.js

@@ -75,6 +75,14 @@ const App = () => {
           >
             <Text>Reset</Text>
           </TouchableOpacity>
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => {
+              segmentClient.screen('Home Screen', { productId: 123 });
+            }}
+          >
+            <Text>Send Screen</Text>
+          </TouchableOpacity>
         </View>
       </ScrollView>
     </SafeAreaView>
@@ -84,6 +92,7 @@ const App = () => {
 const styles = StyleSheet.create({
   buttonContainer: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
   },
   button: {
     backgroundColor: 'gray',

src/FullStoryConfig.ts

@@ -3,6 +3,7 @@ import {
   TrackEventType,
   SegmentEvent,
   Plugin,
+  ScreenEventType,
 } from '@segment/analytics-react-native';
 import FullStory from '@fullstory/react-native';
 import { FSSuffixedProperties } from './utils/FSSuffixedProperties';
@@ -12,19 +13,22 @@ interface FullStoryPluginConfig {
   allowlistAllTrackEvents?: boolean;
   allowlistTrackEvents?: Array<string>;
   enableIdentifyEvents?: boolean;
+  enableSendScreenAsEvents?: boolean;
 }
 
 const FULLSTORY_PLUGIN_CONFIG_DEFAULTS: FullStoryPluginConfig = {
   enableFSSessionUrlInEvents: true,
   allowlistAllTrackEvents: false,
   enableIdentifyEvents: true,
+  enableSendScreenAsEvents: false,
 };
 
 export class FullStoryPlugin extends Plugin {
   public enableFSSessionURLInEvents;
   public allowlistAllTrackEvents;
   public allowlistTrackEvents;
   public enableIdentifyEvents;
+  public enableSendScreenAsEvents;
 
   private fsSessionUrl = '';
 
@@ -43,6 +47,7 @@ export class FullStoryPlugin extends Plugin {
     this.allowlistAllTrackEvents = config.allowlistAllTrackEvents;
     this.allowlistTrackEvents = config.allowlistTrackEvents;
     this.enableIdentifyEvents = config.enableIdentifyEvents;
+    this.enableSendScreenAsEvents = config.enableSendScreenAsEvents;
   }
 
   execute(event: SegmentEvent) {
@@ -66,6 +71,15 @@ export class FullStoryPlugin extends Plugin {
           FullStory.identify(event.userId || '', event.traits);
         }
         break;
+      case 'screen':
+        if (this.enableSendScreenAsEvents) {
+          FullStory.event('Segment Screen: ' + event.name, event.properties);
+
+          if (this.enableFSSessionURLInEvents && this.fsSessionUrl) {
+            this.addFSUrlToProperties(event as ScreenEventType);
+          }
+        }
+        break;
     }
 
     return event;
@@ -75,7 +89,7 @@ export class FullStoryPlugin extends Plugin {
     FullStory.anonymize();
   }
 
-  addFSUrlToProperties(event: TrackEventType) {
+  addFSUrlToProperties(event: TrackEventType | ScreenEventType) {
     if (!event.properties) {
       event.properties = {};
     }

src/__tests__/FullStoryConfig.test.ts

@@ -1,21 +1,12 @@
 import { FullStoryPlugin } from '../FullStoryConfig';
-import {
-  EventType,
-  TrackEventType,
-  IdentifyEventType,
-} from '@segment/analytics-react-native';
+import type { TrackEventType } from '@segment/analytics-react-native';
 import FullStory from '@fullstory/react-native';
-
-const EVENT_NAME = 'sample event';
-
-const TRACK_EVENT: TrackEventType = {
-  type: EventType.TrackEvent,
-  event: EVENT_NAME,
-};
-
-const IDENTIFY_EVENT: IdentifyEventType = {
-  type: EventType.IdentifyEvent,
-};
+import {
+  EVENT_NAME,
+  identifyEvent,
+  screenEvent,
+  trackEvent,
+} from './__fixtures__/FSSampleEvents';
 
 interface TrackEventTypeWIthFSUrl extends TrackEventType {
   properties: {
@@ -38,7 +29,7 @@ describe('FullStoryConfig', () => {
       await new Promise(process.nextTick);
 
       const event = plugin.execute({
-        ...TRACK_EVENT,
+        ...trackEvent,
       }) as TrackEventTypeWIthFSUrl;
 
       expect(event.properties.fullstoryUrl).toBe('sampleurl.com');
@@ -52,7 +43,7 @@ describe('FullStoryConfig', () => {
 
       await new Promise(process.nextTick);
 
-      const event = plugin.execute({ ...TRACK_EVENT }) as TrackEventType;
+      const event = plugin.execute({ ...trackEvent }) as TrackEventType;
 
       expect(event.properties).toBe(undefined);
     });
@@ -65,7 +56,7 @@ describe('FullStoryConfig', () => {
       });
 
       plugin.execute({
-        ...TRACK_EVENT,
+        ...trackEvent,
       });
 
       expect(FullStory.event).not.toHaveBeenCalled();
@@ -77,7 +68,7 @@ describe('FullStoryConfig', () => {
       });
 
       plugin.execute({
-        ...TRACK_EVENT,
+        ...trackEvent,
       });
 
       expect(FullStory.event).toHaveBeenCalledTimes(1);
@@ -90,7 +81,7 @@ describe('FullStoryConfig', () => {
       });
 
       plugin.execute({
-        ...TRACK_EVENT,
+        ...trackEvent,
       });
 
       expect(FullStory.event).toHaveBeenCalledTimes(1);
@@ -104,7 +95,7 @@ describe('FullStoryConfig', () => {
       });
 
       plugin.execute({
-        ...IDENTIFY_EVENT,
+        ...identifyEvent,
       });
 
       expect(FullStory.identify).toHaveBeenCalledTimes(1);
@@ -116,7 +107,7 @@ describe('FullStoryConfig', () => {
       });
 
       plugin.execute({
-        ...IDENTIFY_EVENT,
+        ...identifyEvent,
       });
 
       expect(FullStory.identify).not.toHaveBeenCalled();
@@ -132,4 +123,16 @@ describe('FullStoryConfig', () => {
       expect(FullStory.anonymize).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('Test enableSendScreenAsEvents', () => {
+    test('Should call FS event', () => {
+      const plugin = new FullStoryPlugin({ enableSendScreenAsEvents: true });
+
+      plugin.execute({
+        ...screenEvent,
+      });
+
+      expect(FullStory.event).toHaveBeenCalledTimes(1);
+    });
+  });
 });

src/__tests__/__fixtures__/FSSampleEvents.ts

@@ -1,3 +1,10 @@
+import {
+  EventType,
+  TrackEventType,
+  IdentifyEventType,
+  ScreenEventType,
+} from '@segment/analytics-react-native';
+
 export const eCommerceEventsProductListFilteredRaw = {
   list_id: 'todays_deals_may_11_2019',
   filters: [
@@ -56,3 +63,21 @@ export const eCommerceEventsProductListFilteredProcessed = {
   'products.url_str': 'https://www.example.com/product/path',
   'products.image_url_str': 'https://www.example.com/product/path.jpg',
 };
+
+export const EVENT_NAME = 'sample event';
+const SCREEN_NAME = 'sample screen';
+
+export const trackEvent: TrackEventType = {
+  type: EventType.TrackEvent,
+  event: EVENT_NAME,
+};
+
+export const identifyEvent: IdentifyEventType = {
+  type: EventType.IdentifyEvent,
+};
+
+export const screenEvent: ScreenEventType = {
+  type: EventType.ScreenEvent,
+  name: SCREEN_NAME,
+  properties: {},
+};