Release: React Native SDK

With this release we now provide a Tracker SDK for React Native, so you can use Objectiv's advanced modeling on your mobile app's user behavior data as well.

Analytics tracking instrumentation shouldn't cost you a lot of time. So we've put a lot of effort into ensuring that it's incredibly simple and quick.

How does it work?

One of the key aspects of Objectiv is the Location Stack, which captures the exact location where an Event was triggered (more on how & why in this post).

An example Location Stack in Objectiv

{
 "_type": "PressEvent",
 "location_stack": [
   {
     "_type": "RootLocationContext",
     "id": "TabOne"
   },
   {
     "_type": "NavigationContext",
     "id": "drawer"
   },
   {
     "_type": "NavigationContext",
     "id": "bottom-tabs"
   },
   {
     "_type": "ContentContext",
     "id": "tab-one"
   },
   {
     "_type": "PressableContext",
     "id": "do-something"
   }
 ]
}

The new SDK automatically hooks into UI components that come with React Native, plus the React Navigation routing library that is used by many apps.

As a result, to instrument your application, simply:

1. Initialize the tracker & configure the React Navigation Plugin;
2. And then swap the respective UI Components with the ones provided in the new SDK, e.g. anything that's interactive.

User interactions are then automatically tracked, including their full Location Stack.

Code example for 1) Initializing the tracker & configuring the React Navigation Plugin:

export default function Navigation() {
  const navigationContainerRef = useNavigationContainerRef();
 
  const tracker = new ReactNativeTracker({
    applicationId: 'native-react-app',
    endpoint: 'http://localhost:8081/',
    plugins: [
      new ContextsFromReactNavigationPlugin({ navigationContainerRef })
    ]
  })
 
  return (
    <ObjectivProvider tracker={tracker}>
      <NavigationContainer ref={navigationContainerRef}>
        <DrawerNavigator />
      </NavigationContainer>
    </ObjectivProvider>
  );
}

Code example for 2) Swapping the respective UI Components with the ones provided in the new SDK:

To track a Button and where it was clicked:

import { Button } from 'react-native';

<Button
 onPress={onPressHandler}
 title="Learn More"
/>

...simply swap it with its Tracked version:

import { TrackedButton } from '@objectiv/tracker-react-native';

<TrackedButton
 onPress={onPressHandler}
 title="Learn More"
/>

Some other examples of automatically tracked components:

• React Navigation Links.
• Inputs.
• Etc.

Optionally: further enrich Locations For more granular modeling you can also further enrich your interactions' Locations. For example, you can track all Tabs & Drawers like this:

const BottomTab = createBottomTabNavigator<RootTabParamList>();
 
function BottomTabNavigator() {
  return (
    <NavigationContextWrapper id={'bottom-tabs'}>
      {(trackingContext) => (
        <BottomTab.Navigator>
             
          <BottomTab.Screen
            name="TabOne"
            component={TabOneScreen}
            listeners={({ navigation }) => ({
              // We can either assign the resulting callback directly...
              tabPress: makeLinkPressListener({ trackingContext, navigation })
            })}
          />
 
          <BottomTab.Screen
            name="TabTwo"
            component={TabTwoScreen}
            listeners={({ navigation }) => ({
              // Or call it inside an existing callback...
              tabPress: (e) => {
                makeLinkPressListener({ trackingContext, navigation })(e);
                // ... alongside other logic
                console.log(e);
              }
            })}
          />
 
        </BottomTab.Navigator>
      )}
    </NavigationContextWrapper>
  );
}

Manual instrumentation

If for any reason manual instrumentation is required, the SDK comes also with a set of Hooks and low-level Event Trackers to trigger Events programmatically, or to create your own Custom Components.

How to get it

The new React Native SDK can be found on NPM, so just do:

yarn add @objectiv/tracker-react-native

# or

npm install @objectiv/tracker-react-native

Give it a try, and please do let us know what you think on Slack.

Enjoy tracking your mobile apps!