Update

package-lock.json

@@ -64,6 +64,7 @@
                 "react-day-picker": "^9.7.0",
                 "react-dom": "^19.0.0",
                 "react-error-boundary": "^6.0.0",
+                "react-ga4": "^2.1.0",
                 "react-hook-form": "^7.57.0",
                 "react-konva": "^19.0.6",
                 "react-konva-utils": "^1.1.0",
@@ -7390,6 +7391,12 @@
                 "react": ">=16.13.1"
             }
         },
+        "node_modules/react-ga4": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+            "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==",
+            "license": "MIT"
+        },
         "node_modules/react-hook-form": {
             "version": "7.57.0",
             "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.57.0.tgz",

package.json

@@ -83,6 +83,7 @@
         "react-day-picker": "^9.7.0",
         "react-dom": "^19.0.0",
         "react-error-boundary": "^6.0.0",
+        "react-ga4": "^2.1.0",
         "react-hook-form": "^7.57.0",
         "react-konva": "^19.0.6",
         "react-konva-utils": "^1.1.0",

resources/js/app.tsx

@@ -4,6 +4,8 @@ import { createInertiaApp } from '@inertiajs/react';
 import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
+import { GA4Provider } from './Plugins/GA4Context.jsx'; // Updated import
+
 import DetailedErrorFallback from './components/custom/detailed-error-fallback'; // Import your component
 import { Toaster } from './components/ui/sonner';
 import { initializeTheme } from './hooks/use-appearance';
@@ -34,14 +36,16 @@ createInertiaApp({
                     console.log('Error boundary reset');
                 }}
             >
-                <MittProvider>
-                    <AxiosProvider>
-                        <Toaster position="top-right" />
-                        <AuthDialog />
+                <GA4Provider>
+                    <MittProvider>
+                        <AxiosProvider>
+                            <Toaster position="top-right" />
+                            <AuthDialog />
 
-                        <App {...props} />
-                    </AxiosProvider>
-                </MittProvider>
+                            <App {...props} />
+                        </AxiosProvider>
+                    </MittProvider>
+                </GA4Provider>
             </ErrorBoundary>
         );
 

resources/js/plugins/GA4Context.jsx

@@ -0,0 +1,27 @@
+import { createContext, useContext, useEffect } from 'react';
+import ReactGA from 'react-ga4';
+
+const GA4Context = createContext();
+
+export const useGA4 = () => {
+    const context = useContext(GA4Context);
+    if (context === undefined) {
+        throw new Error('useGA4 must be used within a GA4Provider');
+    }
+    return context;
+};
+
+export const GA4Provider = ({ children }) => {
+    useEffect(() => {
+        const GOOGLE_TAG_ID = import.meta.env.VITE_GOOGLE_TAG_ID;
+
+        if (GOOGLE_TAG_ID) {
+            ReactGA.initialize(GOOGLE_TAG_ID);
+            console.log('Google Analytics 4 initialized with ID:', GOOGLE_TAG_ID);
+        } else {
+            console.warn('GA4 is not set. Google Analytics 4 will not be initialized.');
+        }
+    }, []);
+
+    return <GA4Context.Provider value={ReactGA}>{children}</GA4Context.Provider>;
+};