react-native-mixpanel-module v1.1.3

react-native-mixpanel-module

Getting started

$ npm install react-native-mixpanel-module --save

Mostly automatic installation

$ react-native link react-native-mixpanel-module

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-mixpanel-module and add RNMixpanelModule.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNMixpanelModule.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.reactlibrary.RNMixpanelModulePackage; to the imports at the top of the file
• Add new RNMixpanelModulePackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

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

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-mixpanel-module')

Windows

Read it! :D

1. In Visual Studio add the RNMixpanelModule.sln in node_modules/react-native-mixpanel-module/windows/RNMixpanelModule.sln folder to their solution, reference from their app.
2. Open up your MainPage.cs app

• Add using Mixpanel.Module.RNMixpanelModule; to the usings at the top of the file
• Add new RNMixpanelModulePackage() to the List<IReactPackage> returned by the Packages method

Usage

//Importing the Mixpanel React Native module in app!
import RNMixpanelModule from 'react-native-mixpanel-module';

//Initialising Mixpanel module with token.
NMixpanelModule.initWithToken('xxxxxxxxxxxx', {
	showSurveyOnActive: false,
	showNotificationOnActive: false,
	keepLocationTrackingOn: false
});

let mixpanelDistinctID;
//getting the distinct id using the callbacks!
RNMixpanelModule.distinctId((events) => {
  if (events == null) {
    console.error(events);
  } else {
    mixpanelDistinctID = events;
    //Identifying the user with distinctId.
    RNMixpanelModule.identify(mixpanelDistinctID);
    const profileJSON = {
        $name: mixpanelDistinctID,
        // '$email' : (Ti.App.Properties.getString("username") + '@mindstix.com'),
        'Date of Last App Open': 'xyz'
      };
    //Setting the profile for user on Mixpanel Dashboard.  
    RNMixpanelModule.profileSet(profileJSON);
  }
});
  //Setting the one time profile on Mixpanel dashboard.
	RNMixpanelModule.profileSetOnce({
		'Total App Opens': 0,
		'Total Successful Logins': 0,
		'Date Of First App Open': 'Date',
		'Total Login Visit': 0,
		'Total Dashboard visit': 0,
		'Total Abstract screen visits': 0,
		'Total Webinar screen visits': 0,
		'Total Videos screen visits': 0
	});
  //Incrementing the people event.
	RNMixpanelModule.profileIncrement({
		'Total App Opens': 1,
	});
  //tracking the custom events and storing them on Mixpanel dashboard.
  RNMixpanelModule.track('Contact Us Submit', {
		'Screen Name': 'Contact Us Screen',
		'Screen Orientation': 'Portrait',
		Action: 'Submit Feedback'
	});
  //Registering the super properties if any!
	RNMixpanelModule.registerSuperProperties({
		Organization: 'Mindstix', //TODO: Remove these hardcoding and get the details form service.
		Group: 'Mindstix Member',
	});
//Flushing the queue to Mixpanel dashboard.
RNMixpanelModule.flush();

//Getting the flushInterval for iOS
//For Android we can not get the interval but by default it is 1 min.
RNMixpanelModule.flushInterval((success) => {
  if (success == null) {
    //error getting the flushInterval
  } else {
    //Success getting the flushInterval
    console.log(success);
  }
});  

//Set the flushInterval if needed for iOS.
//For Android we have to use <meta-data android:name="com.mixpanel.android.MPConfig.FlushInterval" android:value="XXX" /> But we have given the legacy support so that we don't have to add the if condition for iOS and Android.
RNMixpanelModule.setFlushInterval(2);