add files to previous commit

frontend/src/core/providers/AnalyticsProvider/constants.js

@@ -29,7 +29,8 @@ export const MIXPANEL_EVENTS = {
   BEACON: "beacon",
   ONBOARDING_COMPLETED: "Onbording complete",
   SESSIONS_COUNT: "Sessions Counter",
-  ONBOARDING_STEPS: "Onboarding Steps",
+  ONBOARDING_STEP: "Onboarding step",
+  ONBOARDING_STATE: "Onboarding state",
   TIMES_VISITED: "Page visit times",
   FORM_SUBMITTED: "form submitted",
   PAGEVIEW_DURATION: "Time spent on page",

frontend/src/core/providers/AnalyticsProvider/index.js

@@ -11,26 +11,57 @@ const AnalyticsProvider = ({ children }) => {
   const { user, isInit } = useUser();
   const [isMixpanelReady, setIsLoaded] = useState(false);
   const router = useRouter();
-
   const ui = useContext(UIContext);
+
+  // ********** OBOARDING STATE **************
+  useEffect(() => {
+    if (ui.onboardingState && isMixpanelReady) {
+      mixpanel.people.set(MIXPANEL_EVENTS.ONBOARDING_STATE, {
+        state: { ...ui.onboardingState },
+      });
+    }
+  }, [ui.onboardingState, isMixpanelReady]);
+
   useEffect(() => {
     if (ui.isOnboardingComplete && isMixpanelReady && user) {
       mixpanel.people.set(MIXPANEL_EVENTS.ONBOARDING_COMPLETED, true);
     }
   }, [ui.isOnboardingComplete, isMixpanelReady, user]);
 
-  useEffect(() => {
+  // ********** ONBOARDING STEP and TIMING **************
-    if (!user && isInit && isMixpanelReady) {
+  const [previousOnboardingStep, setPreviousOnboardingStep] = useState(false);
-      mixpanel.time_event(MIXPANEL_EVENTS.CONVERT_TO_USER);
-    }
-  }, [user, isInit, isMixpanelReady]);
 
   useEffect(() => {
-    if (ui.onboardingStep && isMixpanelReady) {
+    if (isMixpanelReady && router.nextRouter.pathname === "/welcome") {
-      mixpanel.people.set(MIXPANEL_EVENTS.ONBOARDING_STEPS, ui.onboardingStep);
+      if (!previousOnboardingStep) {
+        mixpanel.time_event(MIXPANEL_EVENTS.ONBOARDING_STEP);
+        setPreviousOnboardingStep(ui.onboardingStep);
+      }
+      if (
+        previousOnboardingStep &&
+        previousOnboardingStep !== ui.onboardingStep
+      ) {
+        mixpanel.track(MIXPANEL_EVENTS.ONBOARDING_STEP, {
+          step: previousOnboardingStep,
+          isBeforeUnload: false,
+        });
+        setPreviousOnboardingStep(false);
+      }
+    } else if (previousOnboardingStep) {
+      mixpanel.track(MIXPANEL_EVENTS.ONBOARDING_STEP, {
+        step: previousOnboardingStep,
+        isBeforeUnload: false,
+      });
+      setPreviousOnboardingStep(false);
     }
-  }, [ui.onboardingStep, isMixpanelReady]);
+  }, [
+    previousOnboardingStep,
+    ui.onboardingStep,
+    isMixpanelReady,
+    router.nextRouter.pathname,
+  ]);
 
+  // ********** PING_PONG **************
   useEffect(() => {
     let durationSeconds = 0;
 
@@ -51,6 +82,8 @@ const AnalyticsProvider = ({ children }) => {
     return () => clearInterval(intervalId);
   }, [isMixpanelReady, router.nextRouter.pathname]);
 
+  // ********** TIME SPENT ON PATH**************
+
   const [previousPathname, setPreviousPathname] = useState(false);
 
   useEffect(() => {
@@ -69,6 +102,7 @@ const AnalyticsProvider = ({ children }) => {
     }
   }, [router.nextRouter.pathname, previousPathname, isMixpanelReady]);
 
+  // ********** PAGES VIEW  **************
   useEffect(() => {
     if (isMixpanelReady && ui.sessionId && router.nextRouter.pathname) {
       mixpanel.track(MIXPANEL_EVENTS.PAGEVIEW, {
@@ -95,10 +129,7 @@ const AnalyticsProvider = ({ children }) => {
     };
   }, [router.nextRouter.pathname, isMixpanelReady, ui.sessionId]);
 
-  useEffect(() => {
+  // ********** SESSION STATE **************
-    isMixpanelReady && mixpanel.register("sessionId", ui.sessionId);
-  }, [ui.sessionId, isMixpanelReady]);
-
   useEffect(() => {
     if (clientID) {
       try {
@@ -115,6 +146,12 @@ const AnalyticsProvider = ({ children }) => {
     }
   }, [analytics, clientID]);
 
+  useEffect(() => {
+    isMixpanelReady && mixpanel.register("sessionId", ui.sessionId);
+  }, [ui.sessionId, isMixpanelReady]);
+
+  // ********** USER STATE **************
+
   useEffect(() => {
     if (user) {
       try {
@@ -152,6 +189,13 @@ const AnalyticsProvider = ({ children }) => {
     }
   }, [ui.isLoggingOut, isMixpanelReady]);
 
+  // ********** USER BOUNCE TIME **************
+  useEffect(() => {
+    if (!user && isInit && isMixpanelReady) {
+      mixpanel.time_event(MIXPANEL_EVENTS.CONVERT_TO_USER);
+    }
+  }, [user, isInit, isMixpanelReady]);
+
   return (
     <AnalyticsContext.Provider
       value={{ mixpanel, isMixpanelReady, MIXPANEL_EVENTS, MIXPANEL_PROPS }}

frontend/src/core/providers/UIProvider/index.js

@@ -272,6 +272,7 @@ const UIProvider = ({ children }) => {
         setisOnboardingComplete,
         onboardingSteps,
         setOnboardingState,
+        onboardingState,
         isLoggingOut,
       }}
     >