Release: React Native SDK

Ivar Pruijn

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:

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!

Try Objectiv

Spin up the Demo - Try Objectiv on your local machine (takes 5 minutes)
Objectiv on GitHub - Check out the project and star us for future reference
Objectiv on Slack - Join the discussion or get help