React Native Mixpanel Integration
This package provides a React Native compatible, Mixpanel component which runs on iOS and Android using the same JavaScript API.
Installation
npm install @pod-point/react-native-mixpanel --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.6.4'
//compile 'com.google.android.gms:play-services:3.1+' - Comment or delete this line
}
iOS Setup Guide
- Go get yourself a cup of coffee, this could take a while...
- Open up your React Native project in XCode, this is the
.xcodeproj
file in theios
directory of your React Native project. - Click on the root of your project in XCode, then select your project's main target. Now search for Header Search
Paths. Add
$(SRCROOT)/../node_modules/@pod-point/react-native-mixpanel
and$(PROJECT_DIR)/../node_modules/@pod-point/react-native-mixpanel/ios_modules/mixpanel-iphone-2.9.0
to the header search path list and make sure that they are both set to recursive. - Open
node_modules/@pod-point/react-native-mixpanel/ios
in Finder and locate thePPTMixpanel.xcodeproj
package. Drag this file into the XCode project navigator. You can keep this in theLibraries
group along with all the other React Native packages. - Expand the
PPTMixpanel.xcodeproj
tree and selectPPTMixpanelApi.plist
- drag this into the group which contains yourAppDelegate.h
andAppDelegate.m
files; this group is usually named after your app. When prompted ensure that Copy Items if Needed is deselected when prompted, this will prevent this file from being committed into source control. Open up the file and enter your Mixpanel API key into the value column of the row namedAPI Key
. - Open up
AppDelegate.m
and add#import "PPTMixpanelProvider.h"
at the top of the file. Then add[PPTMixpanelProvider provideAPIKey];
somewhere in theapplication
method, ideally at the top. - Select the
Mixpanel SDK
group inPPTMixpanel.xcodeproj
, drag these packages into theLibraries
group of your React Native project and ensure that Copy Items if Needed is deselected when prompted. - Click on the root of your project in XCode, then select your project's main target. Click on Build Phases and double check that all the libraries and frameworks were automatically added to the Link Binary With Libraries phase. If they weren't, select all the packages in the Google Maps SDK group and drag them into this build phase.
- Hit
Cmd+R
and make sure the app runs!
Android Setup Guide
- Open up your React Native project in Android Studio, this is the
android
directory in your React Native project. - Expand Gradle Scripts from within the project tree and open
settings.gradle
. Replace the line in the script which statesinclude ':app'
withinclude ':app', ':pptmixpanel'
(or append':pptmixpanel'
to the end of the include statement if you're already including other modules). - Add the following line to the end of
settings.gradle
:
project(':pptmixpanel').projectDir = new File(rootProject.projectDir, '../node_modules/@pod-point/react-mixpanel/android/library')
- Open up your
app
modulebuild.gradle
file and add the following line to the end of your dependancies section:
compile project(path: ':pptmixpanel')
- You should now be prompted to run a Gradle project sync so press Sync Now in the gold toolbar that should be visible.
- Open your projects
MainActivity
class and import the following package:
import com.podpoint.pptmapview.PPTMixpanel;
- Find the line in your main activity class which has the following on it -
.addPackage(new MainReactPackage())
, add the following line below:
.addPackage(new PPTMixpanelPackage())
- Expand the
pptmixpanel
package in your project explorer and then expand themanifests
directory. Open up theAndroidManifset.xml
and find the node with the keycom.podpoint.PPTMixpanel.API_KEY
. Enter your Mixpanel API key into theandroid: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. - Hit
Ctrl+R
and make sure the app runs!
Basic Usage
Include Mixpanel using the following:
import Mixpanel from '@pod-point/react-native-mixpanel';
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'});