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
This commit is contained in:
Radosław Gierwiało
2025-12-05 22:28:00 +01:00
parent 3523172ecb
commit a786b1d92d
6 changed files with 313 additions and 4 deletions

View File

@@ -1,5 +1,6 @@
import { useState, useEffect } from 'react';
import { Cookie, X } from 'lucide-react';
import { initGA } from '../../utils/analytics';
/**
* GDPR/RODO compliant cookie consent banner
@@ -20,6 +21,12 @@ const CookieConsent = () => {
const handleAccept = () => {
localStorage.setItem('cookieConsent', 'accepted');
setIsVisible(false);
// Initialize Google Analytics after consent
const measurementId = import.meta.env.VITE_GA_MEASUREMENT_ID;
if (measurementId) {
setTimeout(() => initGA(measurementId), 500);
}
};
const handleDecline = () => {