mix-panel-utility file for data analysis [POC]

Choosing Mixpanel over other analytics apps can be influenced by several factors. Here are some key reasons why one might prefer Mixpanel:

Focus on Events: Mixpanel is designed around event tracking, allowing for detailed insights into user interactions rather than just page views.
Flexibility: You can define custom events tailored to your application, enabling more relevant analysis.
Immediate Insights: Mixpanel offers real-time tracking, allowing you to react quickly to user behavior and make informed decisions.
Handling Growth: Mixpanel is suitable for startups to large enterprises, making it a scalable solution as your data and user base grow.

Steps to initialize mix-panel Earlier we used to initialize mix-panel in every app's directory src/service/mixPanelUtil.ts. Still, after a discussion with Ravi sir, we came up with a solution instead of initializing mix-panel again and again, we can create a mixPanelUtility component in dxp-components package and import it from there.

So now we have created a mix panel utility file in dxp-component and imported every method used from there.

Code structure:

mixPanelService.ts

initialize mix-panel

import mixpanel from 'mixpanel-browser';

mixpanel.init(process.env.VUE_APP_MIX_PANEL_TOKEN as string, {   //token is declared in .env file of every app
    debug: true,
    track_pageview: true,
    persistence: 'localStorage'
});

//Initializes Mixpanel with a token and configures it to track page views and use local storage for persistence.

Function to Identify Users

const addMixPanelUser = (userId: string, properties: Record<string, any>) => {
    mixpanel.identify(userId);
    mixpanel.people.set(properties);
};

Function to Track Events:

const addMixPanelEvent = (event: string, properties: Record<string, any> = {}) => {
    mixpanel.track(event, properties);
};

Reset Function

const mixPanelReset = () => {
    mixpanel.reset();
};

Exporting Functions

export {
    addMixPanelUser,
    addMixPanelEvent,
    mixPanelReset
};

As of now we have implemented mix-panel functionality in Launchpad and fulfillment app, where we can track login activity, print picklist button event, force scan toggle event.

How do we track user ?

const appName = 'LaunchPad';                        // Define app name 
const user = resp.data;                                     // Extract user data from the response
addMixPanelUser(user.userId, {
  '$userLoginId': user.userLoginId,                    // Set the user's login ID
  '$email': user.email,                                        // Set the user's login email
  'app_name': appName,                                  // Set the app name
});

How do we track events ?

const appName = 'LaunchPad';                       // Define app name

        addMixPanelEvent('Login', {
          '$userLoginId':this.current.userLoginId,      // Set user's login ID
          '$app_name': appName,                            // Set app name
        })

hotwax / dxp-components

mix-panel-utility file for data analysis [POC] #311

Related Issues

310

Short Description and Why It's Useful

Screenshots of Visual Changes before/after (If There Are Any)

Is the changes contains any breaking change?

Contribution and Currently Important Rules Acceptance