@smartpay/mixpanel

Mixpanel

This module is an in-house minimalism for easily integrating Mixpanel across Consumer and Merchant projects

Usage

Initialization

• Pass a token and super properties to Mixpanel.initialize in your App.tsx

Mixpanel.initialize({
  token: process.env.REACT_APP_MIXPANEL_TOKEN || '',
  superProps: {
    Product: 'Checkout',
    Platform: 'Web',
  },
});

• urlToScreen prop is optional to easily define tracking screen name based on current url path

Track page view and duration

• Add useTrackPageView in your screen render method. By default, it will also track a duration the consumer stays on that screen.

const LoginScreen: FC<RouteComponentProps> = () => {
  useTrackPageView();

  return (
    ...
  )
};

Track actions

• Call trackAction with an item name of that element

Mixpanel.trackAction({
  action: 'Click',
  itemName: 'Submit',
});

Track user idenfifer

• Call setUserID after initalization with a unique identifier from the Backend

Register super properties

• Call registerSuperProperties to have certain properties that you want to include with each event you send

Set user properties

• Call setUserProperties to explore and segment users by who they are