UnifyApps Analytics SDK for React Native

The UnifyApps Analytics SDK is a comprehensive toolkit designed to integrate your React Native application with the UnifyApps Analytics platform. This SDK empowers developers to track user behavior, monitor app performance, and transmit data securely in real time.

Key Features

• Event Tracking: Record custom and predefined events such as user actions, session data, and errors.
• Real-Time Data Transmission: Send analytics data to UnifyApps Analytics for instant insights.
• Customizable Schema: Define event structures tailored to your application’s requirements.
• Secure and Optimized: Enjoy encrypted data communication and performance optimized for React Native environments.
• Cross-Platform Compatibility: Fully supports both Android and iOS.

Installation for React Native Applications

Prerequisites

• React Native CLI installed.
• React Native version 0.60 or later (for auto-linking support).

Step 1: Install the SDK

Update .npmrc accordingly

@unifyapps:registry=https://registry.npmjs.org/
registry.npmjs.org/:_authToken=<npm_token>

Use npm or pnpm or Yarn to add the SDK to your project:

npm install @unifyapps/analytics-react-native
pnpm install @unifyapps/analytics-react-native
yarn add @unifyapps/analytics-react-native

Step 2: Link the Native Modules

For React Native 0.60 and above, auto-linking should handle this step

cd ios && pod install

Step 3: Permissions:

Please add the following permissions to the AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Step 4: Configure the SDK

To use UnifyApps Analytics, first import the necessary components:

Initialize the client with the following config options: | Config Option | Type | Description | Default | |---------------|------|-------------|---------| | host | string | Custom host URL for the analytics endpoint | https://marketing.uat.unifyapps.com | | apiKey | string | Your API key | Required | | sessionTimeout | number | Session timeout in seconds | 5 min | | isEventBatching | boolean | is event batching allowed | true | | flushAt | number | number of events in each batch to be send | 20 | | debug | boolean | to log the payloads and responses | false |

Then, wrap your app in the AnalyticsProvider using the client created above:

import {
  createClient,
  AnalyticsProvider,
} from '@unifyapps/analytics-react-native';

const config = {
  host: 'https://marketing.uat.unifyapps.com',
  apiKey: 'YTph',
  sessionTimeout: 300000,
  flushAt: 20,
  isEventBatching: true,
  debug: false
};

const unifyAppsClient = createClient(config);

Then, wrap your app in the AnalyticsProvider using the client created above:

<AnalyticsProvider client={unifyAppsClient}>
  <App />
</AnalyticsProvider>

Usage

Tracking methods

The following methods are available to track different user events:

1. Track
2. Identify
3. Screen
4. Group
5. Alias

To use these methods, first import them from the useAnalytics hook in your component, as shown below:

import { useAnalytics } from '@unifyapps/analytics-react-native';

Then, retrieve the methods in your component:

const { track, identify, alias, reset, group } = useAnalytics();

Methods:

Track

The track method is used to track custom events. You can assign a name to the event as event and send the properties associated with that event:

track(event, properties);

Example: Tracking a form submission. Add the track function in onClick of button.

import { useAnalytics } from '@unifyapps/analytics-react-native';

function handleFormSubmit() {
    const { track } = useAnalytics();
    const formData = {    
        userType: 'Guest'
        timestamp: new Date().toISOString(),
    };
    track('Form Submission', formData);
    // handle form submission ....
}

<button onClick={handleFormSubmit}>
    Submit Form
</button>

Identify

The identify method is used to identify a user. It takes userId and userTraits as arguments.

Initially, the user is set to anonymous, and the userId is assigned a randomly generated string.

When calling identify, the user is updated with the new userId and userTraits:

identify(userId, userTraits);

Example: Call the identity function after login implementation:

import { useAnalytics } from '@unifyapps/analytics-react-native';
...
const { identify } = useAnalytics();
const userDetails = {
  name: 'John Doe',
  age: 22
}
identity('123', userDetails)
...

Alias

The alias method is used to associate a user with a different ID, allowing you to map multiple IDs to the same user. For example, before logging in, the user is anonymous and is assigned a random ID. After logging in, you can use the alias method to map the anonymous user to the logged-in user:

alias(userId);

Example: If you want to link events from before the user logs in (random user id) to those after login (userId), you can create an alias. This event can then be used to map all the activities to one user with different ids.

import { useAnalytics } from '@unifyapps/analytics-react-native';
...
const { alias } = useAnalytics();
userId = '123';
login(); //login implementation.
alias(userId);

Group

The group method is used to associate a user with a group, such as an organization or company. It takes groupId and groupTraits as arguments:

group(groupId, groupTraits);

Example: Adding users organisation details.

import { useAnalytics } from '@unifyapps/analytics-react-native';
...
const { group } = useAnalytics();
const organisation = {
  name : 'abc',
  address : "xyz",
  id : '987'
}
group(organisation.id, organisation)

Screen

The screen method is used to track screen views. You can send the screen name as screen along with other related properties:

screen(screen, properties);

Example: Tracking when the user visits a particular screen:

import { useAnalytics } from '@unifyapps/analytics-react-native';

const Home = () => {
  const { screen } = useAnalytics();
  const screenDetails = {
    name: 'Home',
    visit: new Date().toJSON();
  }
  screen('Home', screenDetails)

  return (
    <div>
      <h1>Home screen</h1>
    </div>
  )

}

Reset

The reset method is used to reset the analytics state. It sets the user to anonymous and assigns a randomly generated string as the userId:

reset();

Example: Clearing User Details after user logouts:

import { useAnalytics } from '@unifyapps/analytics-react-native';
const { reset } = useAnalytics();
logout(); // logout details ...
reset();