• Home  / 
  • Mobile
  •  /  React Native Analytics with Fabric

React Native Analytics with Fabric

By w s / June 26, 2017
React native fabric dashboard

React native is a good choice to write cross platform mobile application. Testing and debugging react native applications locally is also quite straightforward.

Once we deploy these applications, we definitely want to know how our users is using our application. For web applications, most of the time we are defaulting to google analytics. However, for react native application running on mobile, google analytics might not work very well.

For some time now, I have been using Fabric to understand user’s behaviour in my react native backed mobile applications. As a bonus, on top of being able to send out user’s behaviour, Fabric’s core is its’ Crashlytics framework which gives you a quick view when there are crashes in your application!

Side Note: Fabric was acquired by google and will be working closely with the Firebase team. Really looking forward to the point where google analytics and fabric is merged for mobile devices!

Let’s walk through some of the useful setups to do in your Fabric enabled react native applications.

Fabric installation

First, you would need to setup fabric in your react native project by following the steps outlined in:

  1. iOS – install CocoaPods in react native for an easier time and follow https://fabric.io/kits/ios/crashlytics/install
  2. Android – https://fabric.io/kits/android/crashlytics/install

Once done, we will get the excellent package react-native-fabric

react-native install react-native-fabric

 

Tracking users in Crashlytics and Answers

In order to get meaningful data, we would want to track user ID or username in our react native application.

Once you have fabric and react-native-fabric installed, adding user ID and username for tracking is a breeze.

To test out our fabric installation, let’s add a custom user name, id, and email in index file. For testing purpose, add these codes in during componentDidMount in your preferred platform index files (index.<platform>.js).

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import { Crashlytics } from 'react-native-fabric'; //Get Crashlytics component
export default class FabricAnalytics extends Component {
componentDidMount(){
//Sets user details
Crashlytics.setUserName('megaman');
Crashlytics.setUserEmail('[email protected]');
Crashlytics.setUserIdentifier('1234');
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
React native fabric
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('FabricAnalytics', () => FabricAnalytics);
view raw index-crashlytics.js hosted with ❤ by GitHub

Ideally the code is added right after user is logged in. In the case where app is closed and re-opened, we would want to re-assign user ID and username once the app is ready to ensure that crashlytics gets the latest user information.

With crashlytics installed, we automatically get a crash/error notification immediately.

Getting user behaviours

Since we want to get the analytical capability of fabric as well, we would then need to enable Fabric’s Answer. react-native-fabric already have answers bundled with the package. All we need to do is to enable Answer from Fabric dashboard.

The very basic analytics that we would definitely want to gather is scenes/routes movement that is triggered by our users.

In the case of navigation, be it react-navigator or react-native-router-flux, we can setup a middleware in redux or manually add an interceptor on scene change.

However, to test out whether our Answers installation works well, we can simulate an event by adding a call to Answers on componentDidMount again.

...
import { Crashlytics, Answers } from 'react-native-fabric'; //Add Answers
export default class FabricAnalytics extends Component {
componentDidMount(){
...
//Additional answers
Answers.logContentView('To Do 1', 'To-Do', 'to-do-42');
Answers.logContentView('To Do 2', 'To-Do', 'to-do-42');
}
...
}
view raw index-answers.js hosted with ❤ by GitHub

Simulating a crash

Lastly, we would love to see what actually happens when our application crashes on user’s devices and whether the user setup that we’ve done earlier is sending the correct events.

Go ahead and add a crash simulation in your componentDidMount once again

export default class FabricAnalytics extends Component {
componentDidMount(){
...
setTimeout(()=> Crashlytics.crash(), 5000); //simulates a crash after 5 seconds
}
...
}

 

Enjoying the result!

With Crashlytics and Answer setup as above, it’s time to enjoy the result of our Fabric setup.

Go ahead, build your app in release mode and kick off your simulator. This should result in application starting, sending events to Fabric and crashes after 5 seconds

Note: Your app must be in release mode, debug mode will deny Fabric from sending answers event.

The dashboard

Once you’ve run your app, you will be able to see a functioning dashboard

Crashlytics crash with user details

To get a good look at how the crash is reported, we would need to open the crashlytics menu in Fabric dashboard, pick the issue and have a look at the session. The session will show you exactly who is getting affected!

Here’s a how fabric reports the person who got affected by a crash.



Analytics on Answers

With answers enabled and sending events, we can drill down to the events that Fabric receives.

As a bonus, if you enable Twitter enhanced feature set, you can get the demography of your users. How convenient!


 

Fabric setup should set us far ahead in understanding our user’s behaviour in react-native app!

Do you know of better tools to get analytical insight in mobile application built with react native? Share in the comment if you do 😉