# In-App Analytics In React Native
## **What Is In-app Analytics?**
Collection of data from mobile apps based on different user actions while using the app. And analyzing that data to get insights into user behavior patterns.
## **Why Do We Need It?**
We use it to analyze the user behavior pattern on certain events.
For example:
1. Which button is pressed by the user, and how many times has the user pressed it
2. Which option is frequently selected by the user
3. Which screen is viewed by the user, and what information is the user able to get
## **Types of Analytics Events**
1. Screen view event: When the user has opened any screen, she/he can see the information on that screen.
2. Screen action event: Whenever the user performs an action on-screen, by pressing a button or anything similar.
## **How To Implement It In React Native?**
In React Native, we can achieve this by using third-party supported analytics tools libraries. Like,
1. Firebase analytics
2. App Center Analytics
3. Segment Analytics
Now, let us take a look at it by using these libraries.
### 1. **Firebase Analytics**
Firebase provides various options to collect data from the app. Let’s have a look at two basic types of it: **logScreenView** and **logEvent**.
First, let’s install and configure firebase in the React Native app. You can use **the react-native-firebase/app** package. Please go through these **[steps](https://rnfirebase.io/)** to complete the setup.
```
# Install & setup the app module
yarn add @react-native-firebase/app
# Install the analytics module
yarn add @react-native-firebase/analytics
# If you are developing your app using iOS, run this command
cd ios/ && pod install
```
A. Screen view
When the user opens this screen, then data will be collected on which screen has been viewed by the user.
```jsx
import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import analytics from '@react-native-firebase/analytics';
const NewOffersScreen = () => {
useEffect(() => {
const appAnalytics = async () => {
await analytics().logScreenView({
screen_name: 'NewOffersScreen',
screen_class: 'NewOffersScreen',
});
};
appAnalytics();
}, []);
return (
New OffersUse code OFF50 for 50% off disscount*
);
};
```
B. Screen action
When the user presses any category option, data will be collected on which category the user has selected.
```jsx
import React from 'react';
import {Button, Text, View} from 'react-native';
import analytics from '@react-native-firebase/analytics';
const Categories = () => {
const categorySelected = async category => {
await analytics.logEvent('categorySelected', {categoryName: category});
};
return (
Categories
);
};
```
Firebase also provides some other **[predefined methods](https://rnfirebase.io/reference/analytics#methods)** for analytics.
### **App Center Analytics**
App Center Analytics is an analytics tool developed by Microsoft.
App Center provides a method called **trackEvent** to collect the data for both **screen view events** and **screen action events**.
First, let’s install the app center package in our react native project.
```
yarn add appcenter appcenter-analytics appcenter-crashes --exact
```
For further configuration and setup in the project, follow these **[steps](https://learn.microsoft.com/en-us/appcenter/sdk/getting-started/react-native)**.
Let’s look for a code for the previous examples that we have seen.
A. Screen View
```jsx
import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import Analytics from 'appcenter-analytics';
const NewOffersScreen = () => {
useEffect(() => {
Analytics.trackEvent('ScreenViewed', { screeenName: 'NewOffersScreen' });
}, []);
return (
New OffersUse code OFF50 for 50% off disscount*
);
};
```
B. Screen action
```jsx
import React from 'react';
import {Button, Text, View} from 'react-native';
import Analytics from 'appcenter-analytics';
const Categories = () => {
const categorySelected = category => {
Analytics.trackEvent('categorySelected', {categoryName: category});
};
return (
Categories
);
};
```
### **Segment Analytics**
Segment analytics is another package available for React Native for in-app analytics, similar to what you have seen in the above two packages.
First, let’s install the segment analytics package in the React Native project.
```
yarn add @segment/analytics-react-native @segment/sovran-react-native @react-native-async-storage/async-storage
```
For further configuration and setup in the project, follow these **[steps](https://github.com/segmentio/analytics-react-native)**.
I am sharing the implementation for the previous example.
A. Screen view
```jsx
import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import { useAnalytics } from '@segment/analytics-react-native';
const NewOffersScreen = () => {
const { screen } = useAnalytics();
useEffect(() => {
screen('NewOffersScreen');
}, []);
return (
New OffersUse code OFF50 for 50% off disscount*
);
};
```
B. Screen action
```jsx
import React from 'react';
import {Button, Text, View} from 'react-native';
import { useAnalytics } from '@segment/analytics-react-native';
const Categories = () => {
const { track } = useAnalytics();
const categorySelected = category => {
track('categorySelected', {categoryName: category});
};
return (
Categories
);
};
```
This is how you can set up analytics in the React Native app. If you observe, a similar pattern is used by all these libraries, so it's easy to understand its implementation.
Thank you. 😊