Mixpanel SDKs: React Native

npm install mixpanel-react-native

pod install

//import Mixpanel class from the SDK
import { Mixpanel } from 'mixpanel-react-native';

// create an instance of Mixpanel using your project token
// disable legacy autotrack mobile events
const trackAutomaticEvents = false;
const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN', trackAutomaticEvents);

//initialize Mixpanel
await mixpanel.init();

import { Mixpanel } from 'mixpanel-react-native';

const trackAutomaticEvents = false; // disable legacy autotrack mobile events

// create an instance of Mixpanel using your project token
const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN', trackAutomaticEvents);

// initialize Mixpanel with the full configuration
await mixpanel.init(
  false,                              // optOutTrackingDefault
  { data_source: 'MP-React' },        // superProperties
  'https://api.mixpanel.com',         // serverURL (see Privacy-Friendly Tracking)
  false,                              // useGzipCompression
  { enabled: false }                  // featureFlagsOptions (see Feature Flags)
);

npm install @react-native-async-storage/async-storage

//import Mixpanel class from the SDK
import { Mixpanel } from 'mixpanel-react-native';

const trackAutomaticEvents = false; //disable legacy mobile autotrack
const useNative = false;  //disable Native Mode, use Javascript Mode

// create new Mixpanel class
const mixpanel = new Mixpanel(
  'YOUR_PROJECT_TOKEN',
  trackAutomaticEvents,
  useNative
  );

// initialize Mixpanel
await mixpanel.init();

// track "some_event" with "some property" set to "some_value"
mixpanel.track('some_event', {
  some_property: 'some_value'
});

// start the timer for the event "Image Upload"
mixpanel.timeEvent("Image Upload");

// 20 seconds later...

// track "Image Upload" event
// "Duration" event property set to 20
mixpanel.track("Image Upload");

// register "name" as a super property
mixpanel.registerSuperProperties({
    name: 'Sam',
});
 
// register "city" as an additional super property
// ignore "name" since it already exists
mixpanel.registerSuperPropertiesOnce({
    name: 'Samantha',
    city: 'San Francisco'
});
 
// track a "registration" event
// the event will include the "name" property set to "Sam"
// and "city" set to "San Francisco"
mixpanel.track('registration');

// define super properties as a key-value pair
const superProperties = {
  name: 'Sam',
  city: 'San Francisco'
};

const trackAutomaticEvents = false;

// create new Mixpanel class
const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN', trackAutomaticEvents);

// initialize Mixpanel with the super properties
await mixpanel.init(false, superProperties);

// track "some_event"
// "name" and "city" added as event properties
mixpanel.track('some_event');

// your user signs in and tracks a sign in event
mixpanel.track('sign in');
 
// upon sign in, identify the user with their ID
// ensure future events sent from the user have distinct_id 12345
mixpanel.identify('12345');

// assign the current user to the "mixpanel" company group
// events will contain 'company' prop set to ["mixpanel"]
mixpanel.setGroup('company', 'mixpanel');

// add "mp-us" as an additional company group
// new "company" value is ["mixpanel","mp-us"]
mixpanel.addGroup('company', 'mp-us');

// track "some_event"
// event property "company" = ["mixpanel","mp-us"] is added automatically
mixpanel.track('some_event');

// assign the current user to the "mixpanel" company group
mixpanel.setGroup('company', 'mixpanel');

// specify the target group using the group_key and group_id
// set "size" as a group profile prop to 100
mixpanel.getGroup('company','mixpanel').set('size',100);

await mixpanel.init(
  false,
  {},
  undefined,
  undefined,
  { enabled: true }
);

// Evaluate a flag once flags are ready. Records a $experiment_started exposure event.
const variantValue = await mixpanel.flags.getVariantValue('my-feature-flag', 'control');

npm install @mixpanel/react-native-session-replay

// enable debug log in the console
mixpanel.setLoggingEnabled(true);

//send "some_event"
mixpanel.track('some_event');

// opt user out of tracking
// SDK is prevented from sending any data
mixpanel.optOutTracking();

// this track call will not work
mixpanel.track('some_other_event');

//import Mixpanel class from the SDK
import { Mixpanel } from 'mixpanel-react-native';

const trackAutomaticEvents = false;
const optOutTrackingDefault = true; // opt users out of tracking by default

// create new Mixpanel class
const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN', trackAutomaticEvents);

// initialize Mixpanel with opt-out-by-default
await mixpanel.init(optOutTrackingDefault);

// this track call will not work
mixpanel.track('some_event');

//opt user in to tracking
mixpanel.optInTracking();

// send "some_other_event"
mixpanel.track('some_other_event');

// set the server URL at initialization to use Mixpanel's EU domain
mixpanel.init(false, {}, 'https://api-eu.mixpanel.com');

// set the Mixpanel instance to send data using Mixpanel's EU domain
mixpanel.setServerURL('https://api-eu.mixpanel.com');

// set the server URL at initialization to use Mixpanel's India domain
mixpanel.init(false, {}, 'https://api-in.mixpanel.com');

// set the Mixpanel instance to send data using Mixpanel's India domain
mixpanel.setServerURL('https://api-in.mixpanel.com');

 // disable IP address for geolocation parsing
mixpanel.setUseIpAddressForGeolocation(false);

const serverURL = '<YOUR_PROXY_DOMAIN>';  // your proxy domain
const trackAutomaticEvents = false;

// create an instance of Mixpanel using your project token
const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN', trackAutomaticEvents);

// initialize Mixpanel and route events through the proxy
await mixpanel.init(false, {}, serverURL);