Tracking User Analytics from Login to Home Page in ReactJS

Animesh D. · 2024-12-04T20:03:32.097Z

I am trying to setup analytics from login screen to home page(after authentication), to track conversion Following are the pages and events 1. Login a. `otp_generate_clicked` - mixpanel.track() b. `otp_verify_clicked` - mixpanel.track() 2. Home a. `otp_verified` b. `user_logged` - mixpanel.identify() How do I track the user in 1a and 1b for the same identity in 2b. I'm using simplified merge and code in reactjs

Tracking User Analytics from Login to Home Page in ReactJS | Mixpanel Community

2 comments

· Sorted by Oldest

kapa.ai
APP
·
·
Hi Animesh D., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
kapa.ai
APP
·
·
To track the user across the login screen and home page using Simplified ID Merge in React, you can follow these steps: 1. On the login screen (steps 1a and 1b), use a temporary identifier (like a device ID) for tracking events: LBKS// Login screen const deviceId = generateUniqueDeviceId(); // Generate a unique device IDLBKS// When OTP generate is clicked mixpanel.track('otp_generate_clicked', { $device_id: deviceId });LBKS// When OTP verify is clicked mixpanel.track('otp_verify_clicked', { $device_id: deviceId });LBKS2. On the home page (steps 2a and 2b), after successful authentication, use both the device ID and the user ID: LBKS// Home page, after successful authentication const userId = getUserId(); // Get the authenticated user's IDLBKS// Track OTP verified event mixpanel.track('otp_verified', { $device_id: deviceId, $user_id: userId });LBKS// Identify the user mixpanel.identify(userId);LBKS// Track user logged event mixpanel.track('user_logged', { $device_id: deviceId, $user_id: userId });LBKSBy including both $device_id and $user_id in the events on the home page, Mixpanel will automatically merge the anonymous events from the login screen (associated with the $device_id) with the identified user (associated with the $user_id).This approach follows the best practices for Simplified ID Merge as described in the Mixpanel documentation on Identifying Users (Simplified). The key points are: 1. Use $device_id for anonymous events (login screen). 2. Include both $device_id and $user_id in events after authentication (home page). 3. Call mixpanel.identify(userId) after successful authentication.This setup will allow Mixpanel to link the pre-login and post-login events to the same user, providing a complete view of the user journey from the login screen to the home page.Remember to generate and persist the deviceId appropriately in your React application, possibly using local storage or a state management solution like Redux.Mixpanel SDKs: React Native provides more details on managing user identity in React applications, although the principles are the same for React.js.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.

kapa.ai
APP
·
·
Hi Animesh D., Please stand by as I search the Mixpanel knowledge base for an AI-powered answer. I normally take about 15 seconds or so. In case AI cannot answer your question, feel free to reach out to Mixpanel support at mixpanel.com/get-support. If you have follow-up questions for this thread, please tag me again with your question: @kapa.ai <follow-up question> 👋
Feel free to ask a follow-up question once I've answered by mentioning me with @kapa.ai
kapa.ai
APP
·
·
To track the user across the login screen and home page using Simplified ID Merge in React, you can follow these steps: 1. On the login screen (steps 1a and 1b), use a temporary identifier (like a device ID) for tracking events: LBKS// Login screen const deviceId = generateUniqueDeviceId(); // Generate a unique device IDLBKS// When OTP generate is clicked mixpanel.track('otp_generate_clicked', { $device_id: deviceId });LBKS// When OTP verify is clicked mixpanel.track('otp_verify_clicked', { $device_id: deviceId });LBKS2. On the home page (steps 2a and 2b), after successful authentication, use both the device ID and the user ID: LBKS// Home page, after successful authentication const userId = getUserId(); // Get the authenticated user's IDLBKS// Track OTP verified event mixpanel.track('otp_verified', { $device_id: deviceId, $user_id: userId });LBKS// Identify the user mixpanel.identify(userId);LBKS// Track user logged event mixpanel.track('user_logged', { $device_id: deviceId, $user_id: userId });LBKSBy including both $device_id and $user_id in the events on the home page, Mixpanel will automatically merge the anonymous events from the login screen (associated with the $device_id) with the identified user (associated with the $user_id).This approach follows the best practices for Simplified ID Merge as described in the Mixpanel documentation on Identifying Users (Simplified). The key points are: 1. Use $device_id for anonymous events (login screen). 2. Include both $device_id and $user_id in events after authentication (home page). 3. Call mixpanel.identify(userId) after successful authentication.This setup will allow Mixpanel to link the pre-login and post-login events to the same user, providing a complete view of the user journey from the login screen to the home page.Remember to generate and persist the deviceId appropriately in your React application, possibly using local storage or a state management solution like Redux.Mixpanel SDKs: React Native provides more details on managing user identity in React applications, although the principles are the same for React.js.
kapa.ai is still learning and improving, please let me know how I did by reacting below.
ℹ️ Tip: Mention @kapa.ai in the thread for follow-ups or DM the app for 1-to-1 help.