react-native-mixpanel-android

Notice

This is a revive project of the great https://www.npmjs.com/package/@pod-point/react-native-mixpanel by pod-point. For some reason, the original repo is down and doesn't work anymore with iOS, so I decided to take it and fix it for Android.

React Native Mixpanel Integration

This package provides a React Native compatible, Mixpanel component which runs on Android using the same JavaScript API.

Installation

npm install react-native-mixpanel-android --save

Note: If you're already using Google Play Services 3.1 elsewhere in your project you may see this error when you sync Gradle:

Error:Execution failed for task ':app:processDebugResources'.
> Error: more than one library with package name 'com.google.android.gms'
  You can temporarily disable this error with android.enforceUniquePackageName=false
  However, this is temporary and will be enforced in 1.0

To solve this problem, open the build.gradle file for the :pptmixpanel module and delete or comment this line:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.facebook.react:react-native:0.14.0'
    compile 'com.mixpanel.android:mixpanel-android:4.7.0'
    //compile 'com.google.android.gms:play-services:3.1+' - Comment or delete this line
}

Android Setup Guide

1. Open up your React Native project in Android Studio, this is the android directory in your React Native project.
2. Expand Gradle Scripts from within the project tree and open settings.gradle. Replace the line in the script which states include ':app' with include ':app', ':pptmixpanel' (or append ':pptmixpanel' to the end of the include statement if you're already including other modules).
3. Add the following line to the end of settings.gradle:

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

1. Open up your app module build.gradle file and add the following line to the end of your dependancies section:

compile project(path: ':pptmixpanel')

1. You should now be prompted to run a Gradle project sync so press Sync Now in the gold toolbar that should be visible.
2. Open your projects MainActivity class and import the following package:

import com.podpoint.pptmixpanel.PPTMixpanelPackage;

1. Find the line in your main activity class which has the following on it - new MainReactPackage(), add the following line below:

        return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               new PPTMixpanelPackage() // Add this line
       );

1. Expand the pptmixpanel package in your project explorer and then expand the manifests directory. Open up the AndroidManifset.xml and find the node with the key com.podpoint.PPTMixpanel.API_KEY. Enter your Mixpanel API key into the android:value property and save the file. This file will be kept out of source control so it is safe to store the API key in here.
2. Hit Ctrl+R and make sure the app runs!

Basic Usage

Include Mixpanel using the following:

import Mixpanel from 'react-native-mixpanel-android';

Event Tracking

You can track basic events by with the following call. The first parameter is the name of the event and the second optional parameter is an object of data which you would like to associate with this event:

Mixpanel.track('Android App Started', {foo: 'bar'});

Timing Events

You can time how long an event took with the following calls. The first call starts the timer and only requires the event name as a parameter. The second call stops the timer and requires the same event name to be passed. You may also include an optional parameters object:

Mixpanel.timeEvent('Timed Event');
setTimeout(() => Mixpanel.track('Timed Event'), 500);

Registering Super Properties

You can register super properties which are included with every event you track afterwards with the following call:

Mixpanel.registerSuperProperties({'API Version': 'v3'});

Identifying Users

You can identify a user using a numeric ID or string with the following call:

Mixpanel.identify(6850);

Setting User Properties

You can assign users' extra properties which can help identify them with the following call:

Mixpanel.people.set({'User Type': 'EV Driver'});

Incremeting Numeric Values

You can track numeric values which are associated with a user using the following call:

Mixpanel.people.increment({'Credits': 100});

Tracking Charges

You can track charges associated with the user with the following call. The first parameter is the numeric value of the charge, the second parameter is an optional object associated with this charge:

Mixpanel.people.trackCharge(50, {'Type': 'Account Top-up'});