How to add Segment analytics to your React Native iOS app

When we recently decided to change the analytics solution for Proximistyle, Segment appeared as a convenient solution to the issue of which analytics platform we should try next.

Segment is a platform that sends your analytics data to any number of integrated analytics platforms, that you can enable or disable on a whim. Using the Segment API, we could write the analytics tracking code for our app once, and could decide on which platform we preferred later.

Unfortunately, we quickly discovered that Segment doesn’t officially support React Native, which meant that figuring out how to get it up and running took a little bit longer than it ideally should have. To save you from having to spend time searching for documentation that doesn’t exist, like we did, we decided to create it.

Note that if you’re using Expo, their library supports Segment.

Configuring Segment

Getting started with Segment is really straight forward and can be done in no time. Just follow the setup instructions when you make an account. Configure your source (iOS App) and any destinations you might be interested in. GA and Mixpanel are good candidates here. It is a good idea to send a test event to your destinations immediately, to ensure they are configured correctly to receive data from Segment.

Once you are certain that your Segment destinations work, it’s time to add some analytics to your app.

Configuring Your iOS App

Because we are using React Native, we have to add two different libraries to be able to both track app installs / opens and specific in-app events that we are interested in. These are the native iOS SDK, and a React Native library.

Add Automatic Tracking of Lifecycle Events

Lifecycle events happen when a user installs, opens or uninstalls your app. It is convenient to be able to track when the user opens your app, which includes navigating back to it after having visited another application.

Follow the iOS SDK installation instructions in the official Segment documentation, with one exception. Where it tells you to say “YES” to screen tracking, instead say “NO”. The reason for this, is that automatic screen tracking does not work correctly in React Native. Upon navigating from the home screen to a different screen, about 10 screen events were registered, all with the generic name “UI”.

Reinstall your pods, and launch your app. Go to your Segment dashboard and open the debugger that is available under your iOS source. If you have installed the library successfully, the live tracker will pick up the app install and open.

Now that we can record basic lifecycle events, it’s time to record the more interesting user behaviours within the app.

!!!Note: Adding the iOS SDK means IDFA must now be checked when you next update your app on the app store. You can read the official instructions here. We followed the instructions and our app was approved without delay.

Analytics in React Native

You will want to track specific events using React Native. To do that you have to install an additional React Native library. We used analytics-react-native, which just works out of the box. I would recommend following the setup instructions in the link.

Here is an example for tracking a screen event (when somebody moves from one screen to another in your app):

analytics.screen({
  userId: 'john_doe',
  name: 'Product',
  properties: {
    previous_screen: 'Home',
    // Anything else you want to record
  },
  // Note that app name has to be added
  // for GA screen tracking to work
  context: {
    app: {
      name: 'My Awesome App'
    }
  }
// And any other data about this screen
});

Here is an example for how you would track an event:

analytics.track({
  userId: user.id,
  event: 'Product Searched',
  properties: {
     query: "blue dress",
  }
});

Note: You always have to provide a userId or anonymousId in all your analytics calls, so they can be attributed to a user. This could for example be the ID of the logged in user, a value you generate yourself and cache, or the device IDFA. IDFA is essentially the mobile version of a cookie. Note that you shouldn’t use the unique device ID, as it is not possible to reset this, and it is against GAs tracking policies.

There is a schema for the e-commerce library, so you can ensure that your events can be synchronised correctly with e.g. Google Analytics. One of our main reasons for switching was that we kept having issues with the e-commerce tracking in the old Google Analytics library we kept using in our app, and we also wanted the chance to try out a few new analytics platforms. So far we’re pretty taken with Mixpanel.