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 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.

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 (
    <View>
      <Text>New Offers</Text>
      <Text>Use code OFF50 for 50% off disscount*</Text>
    </View>
  );
};

B. Screen action When the user presses any category option, data will be collected on which category the user has selected.

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 (
    <View>
      <Text>Categories</Text>
      <Button title="Clothes" onPress={() => categorySelected('Clothes')} />
      <Button title="Mobile" onPress={() => categorySelected('Mobile')} />
    </View>
  );
};

Firebase also provides some other predefined 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.

Let’s look for a code for the previous examples that we have seen.

A. Screen View

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 (
    <View>
      <Text>New Offers</Text>
      <Text>Use code OFF50 for 50% off disscount*</Text>
    </View>
  );
};

B. Screen Action

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 (
    <View>
      <Text>Categories</Text>
      <Button title="Clothes" onPress={() => categorySelected('Clothes')} />
      <Button title="Mobile" onPress={() => categorySelected('Mobile')} />
    </View>
  );
};

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.

I am sharing the implementation for the previous example.

A. Screen View

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 (
    <View>
      <Text>New Offers</Text>
      <Text>Use code OFF50 for 50% off disscount*</Text>
    </View>
  );
};

B. Screen action

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 (
    <View>
      <Text>Categories</Text>
      <Button title="Clothes" onPress={() => categorySelected('Clothes')} />
      <Button title="Mobile" onPress={() => categorySelected('Mobile')} />
    </View>
  );
};

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. 😊