@smartpay/mixpanel

Mixpanel

Usage no npm install needed!

<script type="module">
  import smartpayMixpanel from 'https://cdn.skypack.dev/@smartpay/mixpanel';
</script>

README

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