npm package: @pod-point/react-native-mixpanel
Description: A Mixpanel integration for React Native
Author: Edward Coleridge Smith
Latest version: 1.0.1

# 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

```bash
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:

```log
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:

```gradle
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

 1. Go get yourself a cup of coffee, this could take a while...
 2. Open up your React Native project in XCode, this is the `.xcodeproj` file in the `ios` directory of your React
 Native project.
 3. 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*.
 4. Open `node_modules/@pod-point/react-native-mixpanel/ios` in Finder and locate the `PPTMixpanel.xcodeproj` package.
 Drag this file into the XCode project navigator. You can keep this in the `Libraries` group along with all the other
 React Native packages.
 5. Expand the `PPTMixpanel.xcodeproj` tree and select `PPTMixpanelApi.plist` - drag this into the group which contains
 your `AppDelegate.h` and `AppDelegate.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 named `API Key`.
 6. Open up `AppDelegate.m` and add `#import "PPTMixpanelProvider.h"` at the top of the file. Then add 
 `[PPTMixpanelProvider provideAPIKey];` somewhere in the `application` method, ideally at the top.
 7. Select the `Mixpanel SDK` group in `PPTMixpanel.xcodeproj`,  drag these packages  into the `Libraries` group of 
 your React Native project and ensure that *Copy Items if Needed* is deselected when prompted.
 8. 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.
 9. Hit `Cmd+R` and make sure the app runs!
 
## 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/@pod-point/react-mixpanel/android/library')
 ```
 4. Open up your `app` module `build.gradle` file and add the following line to the end of your dependancies section:
 ```
 compile project(path: ':pptmixpanel')
 ```
 5. You should now be prompted to run a Gradle project sync so press *Sync Now* in the gold toolbar that should be
 visible.
 6. Open your projects `MainActivity` class and import the following package:
 ```java
 import com.podpoint.pptmapview.PPTMixpanel;
 ```
 7. Find the line in your main activity class which has the following on it - `.addPackage(new MainReactPackage())`,
 add the following line below:
 ```java
 .addPackage(new PPTMixpanelPackage())
 ```
 8. 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.
 9. Hit `Ctrl+R` and make sure the app runs!
 
## Basic Usage
 
Include Mixpanel using the following:
 
```javascript
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:
 
```javascript
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:
 
```javascript
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:

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

### Identifying Users

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

```javascript
Mixpanel.identify(6850);
```

### Setting User Properties

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

```javascript
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:

```javascript
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:

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