React Native is a popular framework used by developers to build mobile applications for both Android and iOS platforms. One of the most important aspects of building a successful mobile application is user engagement, which is where analytics tools like Mixpanel come into play. Mixpanel is a powerful analytics platform that allows developers to track user behavior, analyze data, and make informed decisions about how to improve their application. In this article, we will explore the React Native Mixpanel library and how it can be used to integrate Mixpanel into your React Native applications.

React Native Mixpanel is a library that provides an easy-to-use interface for integrating Mixpanel into your React Native application. It provides a simple and straightforward API for tracking user events and properties, and it is fully compatible with both Android and iOS platforms. The library is open source, and it can be easily installed via npm.

To get started with React Native Mixpanel, the first step is to install the library. You can install it using npm by running the following command:

npm install react-native-mixpanel

react-native link react-native-mixpanel

• (for RN 0.29.1+; otherwise use rnpm link react-native-mixpanel)

Additional Step for iOS

• Install Mixpanel iOS SDK via either Cocoapods or manually more info here

Additional info for Android (version >= 1.1.2)

From version 1.1.2 module uses Mixpanel SDK >= 5.6.0 that requires FCM

• Migration steps can be found here
• Allow sub-classes to override push notifications payload and Support when more than one push provider is used more info here

Autolinking and RN >= 0.60

Autolinking should work out of the box.

Remember to do: pod install.

Manual Installation

Installation iOS

1. npm install react-native-mixpanel --save
2. Install Mixpanel iOS SDK via either Cocoapods or manually more info here
3. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
4. Go to node_modules ➜ react-native-mixpanel and add RNMixpanel.xcodeproj
5. In XCode, in the project navigator, select your project. Add libRNMixpanel.a to your project’s Build Phases ➜ Link Binary With Libraries
6. Click RNMixpanel.xcodeproj in the project navigator and go the Build Settings tab. Make sure ‘All’ is toggled on (instead of ‘Basic’). Look for Header Search Paths and make sure it contains both $(SRCROOT)/../react-native/React and $(SRCROOT)/../../React - mark both as recursive.
7. Run your project (Cmd+R)

Installation Android

• In android/setting.gradle

...
include ':react-native-mixpanel', ':app'
project(':react-native-mixpanel').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mixpanel/android')

• In android/app/build.gradle

...
dependencies {
    ...
    compile project(':react-native-mixpanel')
}

• register module (in MainActivity.java)

On newer versions of React Native register module (MainApplication.java):

import com.kevinejohn.RNMixpanel.*;  // <--- import

public class MainActivity extends ReactActivity {
  ......

  /**
   * A list of packages used by the app. If the app uses additional views
   * or modules besides the default ones, add more packages here.
   */
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new RNMixpanel(), // <------ add here
        new MainReactPackage());
    }
}

Once you have installed the library, you will need to set up Mixpanel in your application. You can do this by importing the Mixpanel library and initializing it with your Mixpanel project token. This can be done using the following code:

import Mixpanel from 'react-native-mixpanel'; Mixpanel.sharedInstanceWithToken('YOUR_MIXPANEL_PROJECT_TOKEN');

Once you have set up Mixpanel in your application, you can start tracking user events and properties. User events are actions that users perform in your application, such as clicking a button or navigating to a new screen. Properties are additional information that you want to track along with the user events, such as the user’s location or the time of day.

To track a user event, you can use the following code:

Mixpanel.track('BUTTON_CLICKED');

This will track the user event with the name ‘BUTTON_CLICKED’. You can also track properties along with the user event using the following code:

Mixpanel.trackWithProperties('SCREEN_VIEWED', { screenName: 'HomeScreen' });

This will track the user event with the name ‘SCREEN_VIEWED’ and the property ‘screenName’ with the value ‘HomeScreen’.

In addition to tracking user events and properties, React Native Mixpanel also provides APIs for identifying users, setting user properties, and creating funnels. These APIs can be used to gain deeper insights into user behavior and optimize your application accordingly.

Configure mixpanel urls

Add server url in .plist files in iOS project.

<key>com.mixpanel.config.serverURL</key>
<string>https://api-eu.mixpanel.com</string>

Add endpoints to manifest in your Android project.

<application ...>
    <meta-data android:name="com.mixpanel.android.MPConfig.EventsEndpoint"
        android:value="https://api-eu.mixpanel.com/track" />
    <meta-data android:name="com.mixpanel.android.MPConfig.PeopleEndpoint"
        android:value="https://api-eu.mixpanel.com/engage" />
    <meta-data android:name="com.mixpanel.android.MPConfig.GroupsEndpoint"
        android:value="https://api-eu.mixpanel.com/groups" />
</application>

In conclusion, React Native Mixpanel is a powerful library that makes it easy to integrate Mixpanel into your React Native application. It provides a simple and straightforward API for tracking user events and properties, and it is fully compatible with both Android and iOS platforms. With React Native Mixpanel, you can gain valuable insights into user behavior and make informed decisions about how to improve your application.

Notes

For more info please have a look at the official Mixpanel reference for iOS