@segment/analytics-react-native-plugin-live

Signals Plugins for Analytics

• Signals Plugins for Analytics
  • Getting Started
  • Setup
    • Turn off Hermes
    • Setup Network and UI Tracking
    • Setup Screen Tracking

Plugins that enables Auto-Instrumentation for Analytics

Getting Started

To get started:

1. follow the set up instructions for Analytics Swift here to integrate Segment's Analytics SDK into your app.
2. add the dependency:

You need to install the @segment/analytics-react-native-plugin-live and @segment/analytics-react-native-plugin-signals.

Using NPM:

npm install --save @segment/analytics-react-native-plugin-live @segment/analytics-react-native-plugin-signals

Using Yarn:

yarn add @segment/analytics-react-native-plugin-live @segment/analytics-react-native-plugin-signals

Run pod install after the installation to autolink the Live Plugin and Signals Plugin.

Setup

Turn off Hermes

The current implementation does not support Hermes as the default JS Engine. We will support it in the future. For now, follow the below instructions to turn off Hermes to force React Native to use JavaScript Core as the engine:

for iOS, in Podfile, search for hermes_enabled and change the value to false:

:hermes_enabled => false

for Android, in gradle.properties, search for hermesEnabled and change the value to false:

hermesEnabled=false

After making these changes, make sure to run pod install and to clean and rebuild your project.

Setup Network and UI Tracking

Follow the instructions for adding plugins on the main Analytics client:

In your code where you initialize the analytics client call the .add(plugin) method to add the Signals related plugins.

import { LivePlugins } from '@segment/analytics-react-native-plugin-live';
import { SegmentBroadcaster, Signals, SignalsNetworkTracking, signalsScreenTracking, SignalsUITracking } from '@segment/analytics-react-native-plugin-signals';


const segmentClient = createClient({
  writeKey: 'SEGMENT_KEY'
});

// add LivePlugins to analytics client
segmentClient.add({ plugin: new LivePlugins() });
// config Signals
Signals.config = {
  maximumBufferSize: 1,
  broadcastInterval: 5,
  broadcasters: [new SegmentBroadcaster(segmentClient)]
};
// add Signals object to analytics client
segmentClient.add({plugin: Signals});
// add SignalsNetworkTracking to capture network activities
segmentClient.add({plugin: new SignalsNetworkTracking()});
// add SignalsUITracking to capture UI interactions
segmentClient.add({plugin: new SignalsUITracking()});

Setup Screen Tracking

Tracking screens/navigations needs some extra setups depending on the navigation package used. The following is an example that uses React Navigation:

First, add the following imports and function

import {
  NavigationContainer,
  NavigationState,
  PartialState,
  useNavigationContainerRef,
} from '@react-navigation/native';
import {useState} from 'react';

// get current route
const getActiveRouteName = (
  state: NavigationState | PartialState<NavigationState> | undefined,
): string => {
  if (!state || typeof state.index !== 'number') {
    return 'Unknown';
  }

  const route = state.routes[state.index];

  if (route.state) {
    return getActiveRouteName(route.state);
  }

  return route.name;
};

Then, create a ref to store the navigation object

  const navigationRef = useNavigationContainerRef();

Next, pass the ref to NavigationContainer and a function in the onReady prop to track the initial route name. Finally, pass a function in the onStateChange prop to track screen changes

<NavigationContainer
        ref={navigationRef}
        onReady={() => {
          signalsScreenTracking.onScreenChange(navigationRef.current?.getCurrentRoute()?.name);
        }}
        onStateChange={state => {
          const newRouteName = getActiveRouteName(state);
          signalsScreenTracking.onScreenChange(newRouteName);
        }}
      >    

You can follow the same logic (i.e. use signalsScreenTracking.onScreenChange(newScreen)) to capture screen changes if you are using a different library.