NepCodeX

In the previous post about mixpanel, I gave a brief introduction about what analytics is and how to integrate mixpanel with react native. I will do amplitude react native integration and example analytics for the same project in this post. So, it would be best if you looked into that post before diving into this one.

What is Amplitude?

Amplitude is also a product analytics platform where we can track the usage of users similar to Mixpanel. All of the products do this to improve the user experience alongside their products. Microsoft has used Amplitude for a long time and it’s such a great platform. You can check their differences from other sites but I will also be pointing out some in terms of integrating them into a project.

React native project

So, my project has 4 screens Home, Profile, Contact and Privacy policy. From Home, users can go to the other three screens. The home screen looks as follows.

In the previous implementation with Mixpanel react native, I tracked the event “View Screen”, when a user traverses different screens. For this, I added a callback on the state change event for the navigation container. So, I didn’t require any extra code. Here, I will also do the same but in Amplitude.

Setting up Amplitude react native (Legacy)

The installation is simple and we can check that from the documentation.

Link to the documentation: https://www.docs.developers.amplitude.com/data/sdks/react-native/#sdk-installation

yarn add @amplitude/react-native@latest

Once we do this, we have to run the app.

yarn android

Like Mixpanel, I am going to create a new config file “amplitude.js” that contains our instance of Amplitude.

import {Amplitude} from '@amplitude/react-native';

const amplitude = Amplitude.getInstance();
amplitude.init('Your API Key');

export default amplitude;

We can get the API key from Amplitude’s dashboard.

One of the issues with Amplitude is that we don’t have the ability to add custom super properties to each event. For instance, in the previous post, I had included a property “Source” with the value “App” in each event. We cannot do this here that easily.

Likewise, we are going to update the trackEvent callback as follows.

import {useCallback} from 'react';
import amplitude from '../config/amplitude';

export default function useTrackEvent(eventName) {
  return useCallback(
    properties => {
      try {
        amplitude.logEvent(eventName, {Source: 'App', ...properties});
      } catch (e) {
        console.error(e);
      }
    },
    [eventName],
  );
}

Once we do this, we can use the same track event logic in our app. Once we use the app, within 1 minute, we get our events in Amplitude.

In this way, we can integrate Amplitude to react native using the legacy package.

Setting up Amplitude react native using Beta SDK

Although the older SDK works fine, we have got a new SDK of Amplitude for react native, which is in Beta. Let’s remove the older one and install this version.

Reference: https://www.docs.developers.amplitude.com/data/sdks/react-native-sdk/

yarn add @amplitude/analytics-react-native
yarn add @react-native-async-storage/async-storage

What I like about this SDK is, that it uses Async Storage to store the configuration, events data, etc, kind of what firebase does. This way, we don’t need to reuse an instance. Furthermore, we import the instance at the top of our entry point. So, it is always initialized. Also, in this new SDK, we can import directly the method we want, e.g. init, track, etc.

Once we install the packages, we have to rebuild our project. Now, we need to change our config file and import it as follows.

import {init} from '@amplitude/analytics-react-native';

(async function initializeAmplitude() {
  try {
    await init('Your API Key').promise;
  } catch (e) {
    console.error(e);
  }
})();

Now, we are going to import this file at the top of “App.js”

import 'config/amplitude';
// Rest of the code

After this, we have to update our trackEvent callback.

import {useCallback} from 'react';
import {track} from '@amplitude/analytics-react-native';

export default function useTrackEvent(eventName) {
  return useCallback(
    properties => {
      try {
        track(eventName, {Source: 'App', ...properties});
      } catch (e) {
        console.error(e);
      }
    },
    [eventName],
  );
}

Now, if we run the app and move to different screens, we will still see the events.

Conclusion

Thus, we can say that it is easy to set up Mixpanel and Amplitude with react native. However, we have to choose the appropriate technology according to our use cases.