feat(analytics): integrate Google Analytics 4 with GDPR compliance

Prepared the application for Google Analytics 4 tracking with full
GDPR/RODO compliance. GA only loads after user explicitly accepts cookies.

Features:
- Automatic page view tracking on route changes
- Custom event tracking for key user actions
- Privacy-first: GA loads only after cookie consent
- Easy configuration via environment variable
- Comprehensive tracking utilities for common events

Implementation:
- Created analytics.js with GA initialization and event tracking functions
- Created usePageTracking hook for automatic page view tracking
- Integrated GA into App.jsx with AnalyticsWrapper component
- Updated CookieConsent to initialize GA after user consent
- Added VITE_GA_MEASUREMENT_ID to .env.example

Custom events tracked:
- login, sign_up (authentication)
- match_request, match_accepted (matching)
- webrtc_connection, file_transfer (WebRTC)
- event_join, recording_suggestion (events/recording)
- search (search functionality)

Setup:
1. Add VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX to .env
2. Restart frontend container
3. GA will auto-load after user accepts cookies

Documentation:
- Created comprehensive setup guide in docs/GOOGLE_ANALYTICS_SETUP.md
- Includes troubleshooting, debugging tips, and usage examples

frontend/src/App.jsx

@@ -1,6 +1,9 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
+import { useEffect } from 'react';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
+import { initGA } from './utils/analytics';
+import usePageTracking from './hooks/usePageTracking';
 import HomePage from './pages/HomePage';
 import LoginPage from './pages/LoginPage';
 import RegisterPage from './pages/RegisterPage';
@@ -71,15 +74,35 @@ const PublicRoute = ({ children }) => {
   return children;
 };
 
+// Analytics wrapper component
+const AnalyticsWrapper = ({ children }) => {
+  usePageTracking(); // Track page views on route changes
+
+  useEffect(() => {
+    // Initialize Google Analytics when user consents to cookies
+    const measurementId = import.meta.env.VITE_GA_MEASUREMENT_ID;
+    if (measurementId) {
+      // Wait a bit for cookie consent banner to be processed
+      const timer = setTimeout(() => {
+        initGA(measurementId);
+      }, 1500);
+      return () => clearTimeout(timer);
+    }
+  }, []);
+
+  return children;
+};
+
 function App() {
   return (
     <BrowserRouter>
       <AuthProvider>
-        {/* PWA Install Prompt */}
-        <InstallPWA />
+        <AnalyticsWrapper>
+          {/* PWA Install Prompt */}
+          <InstallPWA />
 
-        {/* Cookie Consent Banner */}
-        <CookieConsent />
+          {/* Cookie Consent Banner */}
+          <CookieConsent />
 
         {/* Toast Notifications */}
         <Toaster
@@ -246,6 +269,7 @@ function App() {
           {/* 404 Not Found - Catch all unmatched routes */}
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
+        </AnalyticsWrapper>
       </AuthProvider>
     </BrowserRouter>
   );