feat: track user logged in

Author: velopert

src/containers/base/Core.tsx

@@ -12,6 +12,7 @@ import { useHistory } from 'react-router-dom';
 import gtag from '../../lib/gtag';
 import { useThemeEffect } from '../../components/base/hooks/useThemeEffect';
 import BodyTransition from '../../components/base/BodyTransition';
+import useGoogleAnalyticsUserTracking from '../../lib/hooks/useGoogleAnalyticsUserTracking';
 
 interface OwnProps {}
 interface StateProps {
@@ -23,6 +24,7 @@ type CoreProps = OwnProps & StateProps & DispatchProps;
 const Core: React.FC<CoreProps> = ({ layer }) => {
   useUserLoader();
   useThemeEffect();
+  useGoogleAnalyticsUserTracking();
 
   const history = useHistory();
 

src/lib/hooks/useGoogleAnalyticsUserTracking.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import useUser from './useUser';
+import gtag from '../gtag';
+
+const GA_MEASUREMENT_ID = 'G-8D0MD2S4PK';
+
+/**
+ * Custom hook to track logged-in users with Google Analytics
+ * Sets user_id and user_properties when a user is logged in
+ */
+const useGoogleAnalyticsUserTracking = () => {
+  const currentUser = useUser();
+
+  useEffect(() => {
+    // Only run on client side
+    if (typeof window === 'undefined') return;
+
+    // Check if user is logged in and gtag is available
+    if (currentUser && currentUser.id) {
+      gtag('config', GA_MEASUREMENT_ID, {
+        user_id: currentUser.id,
+        user_properties: {
+          username: currentUser.username,
+        },
+      });
+    }
+  }, [currentUser]);
+};
+
+export default useGoogleAnalyticsUserTracking;