This content originally appeared on Bits and Pieces - Medium and was authored by Bhagya Vithana
Comparison of React Native Analytical Tools
Understanding user behavior is crucial for a better user experience. In the mobile world, there are many analytic tools to do that.
So in this article, I will cover some of the best analytics tools out there for React Native to help you pick the right one for your mobile app.
App Center Analytics — For Mobile apps diagnostics and tracking
App Center Analytics is a component of the App Center SDK that records user sessions and follows all app interactions while gathering device and OS data.
If you are using an Azure subscription, Visual Studio App Center is the best option.
Not only that, but it also combines several services utilized by mobile developers into a single cloud solution.
Supported platforms
- Android
- iOS
To integrate AppCenter with React Native,
- Login with Visual Studio App Center.
2 . Create a new app.
3. Now you can select your code repository from one of the providers listed below (currently, VSTS, GitHub, and Bitbucket are supported).
3. Add SDK to the project.
npm install appcenter appcenter-analytics appcenter-crashes — save-exact
4. To connect the SDK to the project, use the following command.
react-native link
Note: You have to provide the App Secret, which is used to link this app to the appropriate user account.
Tracking events
You may track up to twenty features with Custom Events in Microsoft Analytics to better understand how users behave.
Some tracking methods available are as follows;
- Notification Received Event Handler
- Notification Clicked/Opened Event Handler
- Permission Observer Event Handler
With the event data obtained, we can see all of the logs, events, OS data, device information, and more. It also supports custom events. For example, we can create a custom event for Navigations to evaluate how the user travels through the program.
Services by AppCenter
- Push notification and troubleshooting.
- Perform testing on over 400 different device setups.
- Release Android, iOS, macOS, and UWP builds to end-users as soon as possible.
Google Analytics for Firebase — Multiple features in one product
React Native Firebase is an officially recommended set of packages providing React Native support for Firebase. It works with both Android and iOS projects.
You may have heard about React Native Firebase (RNFirebase), a feature-rich, modular Firebase implementation that’s robust. We’ll utilize this RNFirebase to enable Firebase Analytics tracking in our React Native project.
Supported platforms
- Android
- iOS
- Unity
Features
- Hosting.
- Crash reporting.
- Remote config.
- Cloud messaging.
- Real-time database.
Installation
Step 1: I’m assuming you already have your React Native app up and running at this point. So, to add RNFirebase to your project, use the following instructions.
# Using npm
npm install --save @react-native-firebase/app
# Using Yarn
yarn add @react-native-firebase/app
Step 2: Create a Firebase Project in console.firebase.google.com. Android and iOS each have their own set of installation instructions. I’ve included the Android instructions in the following steps.
Step 3: Add Firebase to your Android app.
Tip!! When integrating Firebase into your project, be sure to include the Android package name. You can find the Android package name in the AndroidManifest.xml file. Then download and place the google-services.json file in the android/app folder.
Step 4: To connect the RNFirebase to your app, navigate to your project folder in your console and enter the following command.
react-native link react-native-firebase
Step 5: Then, you need to import it in the JS files as follows. After that, you can log the events.
import firebase from ‘react-native-firebase’;
UXCam App Analytics — Focus on behavior (qualitative) analysis.
UXCam is a tool that helps you study how people interact with your mobile app. It allows app developers to improve their app’s KPIs by analyzing user behavior.
The focus on behavior (qualitative) analysis rather than numerical (quantitative) analysis sets it apart from other analytics solutions.
UXCam only takes about 5 minutes of effort and two lines of code to integrate into your mobile app.
React Native integration
To add UXCam to your project
yarn add react-native-ux-cam
//If you use npm instead of yarn
npm i react-native-ux-cam
For React Native versions less than 0.60
react-native link react-native-ux-cam
When your app starts, call this method on App.js. You can find your App-key. from the UXCam dashboard.
//Add this on top of App.js
import RNUxcam from 'react-native-ux-cam';
RNUxcam.optIntoSchematicRecordings(); // Add this line to enable iOS screen recordings
RNUxcam.startWithKey('YOUR APP KEY'); // Add this line after RNUxcam.optIntoSchematicRecord
The feature set
- Session Replay
- Heatmaps
- User Analytics
- Funnel Analytics
- KPI Analytics
Segment Analytics — Ability to regulate data
Segment is a cross-platform data collection and analytics software that supports APIs. It also supports React Native.
Another advantage of using Segment is the ability to regulate data. If we want to focus on user privacy, for example, Segment allows you to control and create rules for what data should be collected, and restrict access to specific data categories.
Installation
We can use either Yarn or npm for the installation.
yarn add @segment/analytics-react-native-firebase
// install pods
cd ios && pod install
Now all you have to do is paste the following code into your app.
await analytics.setup('YOUR_WRITE_KEY', {
// This will record screen views automatically!
recordScreenViews: true,
// This will record certain application events automatically!
trackAppLifecycleEvents: true
})Next, make sure you import Analytics-React-Native in the files you plan to use it.
import analytics from '@segment/analytics-react-native'
Now, events like “Application Installed”, “Application Updated”, and “Application Opened” can be captured by Segment analytics. To enable this feature, simply set the trackAppLifecycleEvents property to true.
analytics
.setup('writeKey', {
trackAppLifecycleEvents: true
})
Just in case you have any doubts, referring to the Segment’s documentation can help you understand the overall picture.
The Segment specification has three components.
- It provides the semantics of consumer data acquired across all of segment’s libraries and APIs at first. According to the specifications, it has six fundamental API calls (tracking methods).
- Second, it reviews the event data we gather from multiple Cloud sources and destinations. Email, Live Chat, and A/B Testing are examples of Cloud sources and destinations.
- It maps events depending on the domain (Mobile, E-commerce, Video, B2B and SaaS).
Segment Tracking methods.
Segment suggests recording only a few essential events when you first start off. More can be added in the future! Let’s have a look at some of the tracking techniques and their applications;
Mixpanel — Design and manage funnels
Mixpanel allows you to segment and creates funnels to analyze user actions. It also displays data regarding data points such as location, device, channels, and more.
Mixpanel’s ability to design and manage funnels is one of its most important features.
Prerequisites
React Native v0.6+
Installation
Mixpanel’s React Native SDK wraps across the native iOS and Android SDKs and permits offline tracking as well.
1. Install Mixpanel React Native SDK.
npm install mixpanel-react-native
2. Under your application’s iOS folder.
pod install
3. There is a reported compile issue with Xcode 12.5+; For that you can refer to the workaround.
Initialize Mixpanel
You must first initialize the library with your project token before you can begin tracking. To get the library up and running, first import Mixpanel and then call Mixpanel.init(token) using your project token as the input.
import { Mixpanel } from 'mixpanel-react-native';
...
class YourClass extends React.Component {
constructor(props) {
super(props);
this.configMixpanel();
}
configMixpanel = async () => {
this.mixpanel = await Mixpanel.init("Your mixpanel token");
}
...Features
- Real-time Data.
- Push notifications.
- Funnels.
- A/B Testing.
- Mobile and web.
For easy evaluation, I’ve created a comparison table for these analytical tools as follows.
Final Thoughts!!
As you can see, there are many analytics tools for React Native in 2021. However, there isn’t any silver bullet. So you’ll have to pick one based on your requirements.
Furthermore, this article will help you to compare these tools at a high level. I hope it was helpful. If you find any other tools, feel free to mention them in the comments down below.
Thank you for reading…!!! ?
Build & share independent JS components with Bit
Bit is an extensible tool that lets you create truly modular applications with independently authored, versioned, and maintained components.
Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.
Bit: The platform for the modular web
Learn More
- Building a React Design System for Adoption and Scale
- Creating a Component Library
- How to Integrate AppCenter SDK with React Native
Analytical Tools for React Native was originally published in Bits and Pieces on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Bits and Pieces - Medium and was authored by Bhagya Vithana
Bhagya Vithana | Sciencx (2021-07-29T14:12:34+00:00) Analytical Tools for React Native. Retrieved from https://www.scien.cx/2021/07/29/analytical-tools-for-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.