Update

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>;
+};