Fix Cookie Banner.

src/components/CookieBanner.tsx

@@ -57,6 +57,55 @@ const translations = {
     }
 };
 
+// Definition der verschiedenen Services
+const cookieServices = {
+    essentiell: {
+        category: 'necessary',
+        services: [
+            {
+                name: 'Session Cookies',
+                provider: 'Eigentümer der Website',
+                purpose: 'Speichert Ihre Sitzungsinformationen'
+            }
+        ]
+    },
+    funktional: {
+        category: 'functional',
+        services: [
+            {
+                name: 'Spracheinstellungen',
+                provider: 'Eigentümer der Website',
+                purpose: 'Speichert Ihre bevorzugte Sprache'
+            }
+        ]
+    },
+    analyse: {
+        category: 'analytics',
+        services: [
+            {
+                name: 'Google Analytics',
+                provider: 'Google LLC',
+                purpose: 'Analysiert Webseitennutzung und Nutzerverhalten'
+            }
+        ]
+    },
+    marketing: {
+        category: 'marketing',
+        services: [
+            {
+                name: 'Google Ads',
+                provider: 'Google LLC',
+                purpose: 'Personalisierte Werbung'
+            },
+            {
+                name: 'Facebook Pixel',
+                provider: 'Meta Platforms Inc.',
+                purpose: 'Tracking von Werbekonversionen'
+            }
+        ]
+    }
+};
+
 interface CookieSettings {
     necessary: boolean;
     analytics: boolean;
@@ -98,25 +147,59 @@ const CookieBanner = () => {
                 const parsedSettings = JSON.parse(storedSettings) as CookieSettings;
                 setCookieSettings(parsedSettings);
 
-                // Nur Google Analytics laden, wenn zugestimmt wurde
+                // Lade die entsprechenden Dienste basierend auf den Einstellungen
-                if (parsedSettings.analytics) {
+                initializeServices(parsedSettings);
-                    initGA();
-                    logPageView();
-                }
             }
         } catch (error) {
             console.error('Error loading cookie settings:', error);
         }
     }, []);
 
+    // Initialisiere Dienste basierend auf den Cookie-Einstellungen
+    const initializeServices = (settings: CookieSettings) => {
+        // Initialisiere Google Analytics, wenn Analytics-Cookies akzeptiert wurden
+        if (settings.analytics) {
+            initGA();
+            logPageView();
+        }
+
+        // Hier könnten weitere Dienste initialisiert werden
+        if (settings.marketing) {
+            // Marketing-Dienste initialisieren (z.B. Facebook Pixel)
+            initializeMarketingServices();
+        }
+
+        if (settings.functional) {
+            // Funktionale Dienste initialisieren
+            initializeFunctionalServices();
+        }
+    };
+
+    // Initialisiere Marketing-Dienste
+    const initializeMarketingServices = () => {
+        // Facebook Pixel (Beispiel)
+        try {
+            if (typeof window !== 'undefined' && !window.fbq) {
+                // Facebook Pixel Code hier einfügen
+                console.log('Facebook Pixel würde jetzt initialisiert');
+            }
+        } catch (e) {
+            console.error('Error initializing marketing services:', e);
+        }
+    };
+
+    // Initialisiere funktionale Dienste
+    const initializeFunctionalServices = () => {
+        // Beispiel für funktionale Dienste
+        console.log('Funktionale Dienste würden jetzt initialisiert');
+    };
+
     const handleSaveSettings = () => {
         localStorage.setItem('cookieSettings', JSON.stringify(cookieSettings));
         localStorage.setItem('cookieConsent', 'true');
 
-        if (cookieSettings.analytics) {
+        // Initialisiere Dienste basierend auf den ausgewählten Einstellungen
-            initGA();
+        initializeServices(cookieSettings);
-            logPageView();
-        }
 
         setShowSettings(false);
     };
@@ -133,8 +216,8 @@ const CookieBanner = () => {
         localStorage.setItem('cookieConsent', 'true');
         setCookieSettings(allSettings);
 
-        initGA();
+        // Initialisiere alle Dienste
-        logPageView();
+        initializeServices(allSettings);
 
         setShowSettings(false);
     };
@@ -225,6 +308,17 @@ const CookieBanner = () => {
                                             <div className="text-xs text-white/60">{getText('alwaysActive')}</div>
                                         </div>
                                         <p className="text-xs text-white/70">{getText('necessaryDesc')}</p>
+
+                                        {/* Services List */}
+                                        <div className="mt-2 border-t border-white/10 pt-2">
+                                            {cookieServices.essentiell.services.map((service, index) => (
+                                                <div key={index} className="mt-2">
+                                                    <div className="text-xs font-medium text-white/80">{service.name}</div>
+                                                    <div className="text-xs text-white/60">Anbieter: {service.provider}</div>
+                                                    <div className="text-xs text-white/60">Zweck: {service.purpose}</div>
+                                                </div>
+                                            ))}
+                                        </div>
                                     </div>
 
                                     {/* Analytics cookies */}
@@ -242,6 +336,17 @@ const CookieBanner = () => {
                                             </label>
                                         </div>
                                         <p className="text-xs text-white/70">{getText('analyticsDesc')}</p>
+
+                                        {/* Services List */}
+                                        <div className="mt-2 border-t border-white/10 pt-2">
+                                            {cookieServices.analyse.services.map((service, index) => (
+                                                <div key={index} className="mt-2">
+                                                    <div className="text-xs font-medium text-white/80">{service.name}</div>
+                                                    <div className="text-xs text-white/60">Anbieter: {service.provider}</div>
+                                                    <div className="text-xs text-white/60">Zweck: {service.purpose}</div>
+                                                </div>
+                                            ))}
+                                        </div>
                                     </div>
 
                                     {/* Marketing cookies */}
@@ -259,6 +364,17 @@ const CookieBanner = () => {
                                             </label>
                                         </div>
                                         <p className="text-xs text-white/70">{getText('marketingDesc')}</p>
+
+                                        {/* Services List */}
+                                        <div className="mt-2 border-t border-white/10 pt-2">
+                                            {cookieServices.marketing.services.map((service, index) => (
+                                                <div key={index} className="mt-2">
+                                                    <div className="text-xs font-medium text-white/80">{service.name}</div>
+                                                    <div className="text-xs text-white/60">Anbieter: {service.provider}</div>
+                                                    <div className="text-xs text-white/60">Zweck: {service.purpose}</div>
+                                                </div>
+                                            ))}
+                                        </div>
                                     </div>
 
                                     {/* Functional cookies */}
@@ -276,6 +392,17 @@ const CookieBanner = () => {
                                             </label>
                                         </div>
                                         <p className="text-xs text-white/70">{getText('functionalDesc')}</p>
+
+                                        {/* Services List */}
+                                        <div className="mt-2 border-t border-white/10 pt-2">
+                                            {cookieServices.funktional.services.map((service, index) => (
+                                                <div key={index} className="mt-2">
+                                                    <div className="text-xs font-medium text-white/80">{service.name}</div>
+                                                    <div className="text-xs text-white/60">Anbieter: {service.provider}</div>
+                                                    <div className="text-xs text-white/60">Zweck: {service.purpose}</div>
+                                                </div>
+                                            ))}
+                                        </div>
                                     </div>
                                 </div>
                             </div>

src/utils/analytics.ts

@@ -2,8 +2,26 @@ import ReactGA from 'react-ga4';
 
 const TRACKING_ID = 'G-N0PZBL7X18';
 
+// Facebook Pixel ID - ersetze dies durch deine echte Pixel-ID
+const FB_PIXEL_ID = 'XXXXXXXXXXXXXXXXX';
+
+// Prüft, ob eine bestimmte Cookie-Kategorie aktiviert ist
+const isCookieCategoryEnabled = (category: string): boolean => {
+  try {
+    const cookieSettings = localStorage.getItem('cookieSettings');
+    if (!cookieSettings) return false;
+
+    const settings = JSON.parse(cookieSettings);
+    return settings[category] === true;
+  } catch (error) {
+    console.error('Error checking cookie settings:', error);
+    return false;
+  }
+};
+
+// Google Analytics Initialisierung
 export const initGA = () => {
-  if (localStorage.getItem('cookieConsent') !== 'true') {
+  if (!isCookieCategoryEnabled('analytics')) {
     return; // Keine Analytics-Initialisierung ohne Zustimmung
   }
 
@@ -16,7 +34,7 @@ export const initGA = () => {
 };
 
 export const logPageView = () => {
-  if (localStorage.getItem('cookieConsent') !== 'true') {
+  if (!isCookieCategoryEnabled('analytics')) {
     return; // Kein Tracking ohne Zustimmung
   }
 
@@ -28,7 +46,7 @@ export const logPageView = () => {
 };
 
 export const trackEvent = (category: string, action: string, label?: string) => {
-  if (localStorage.getItem('cookieConsent') !== 'true') {
+  if (!isCookieCategoryEnabled('analytics')) {
     return; // Kein Tracking ohne Zustimmung
   }
 
@@ -40,7 +58,7 @@ export const trackEvent = (category: string, action: string, label?: string) =>
 };
 
 export const trackConversion = (value?: number) => {
-  if (localStorage.getItem('cookieConsent') !== 'true') {
+  if (!isCookieCategoryEnabled('analytics')) {
     return; // Kein Tracking ohne Zustimmung
   }
 
@@ -52,7 +70,7 @@ export const trackConversion = (value?: number) => {
 };
 
 export const trackTiming = (category: string, variable: string, value: number) => {
-  if (localStorage.getItem('cookieConsent') !== 'true') {
+  if (!isCookieCategoryEnabled('analytics')) {
     return; // Kein Tracking ohne Zustimmung
   }
 
@@ -64,15 +82,75 @@ export const trackTiming = (category: string, variable: string, value: number) =
   });
 };
 
+// Facebook Pixel Initialisierung
+export const initFBPixel = () => {
+  if (!isCookieCategoryEnabled('marketing')) {
+    return; // Keine Marketing-Cookie-Initialisierung ohne Zustimmung
+  }
+
+  if (typeof window !== 'undefined' && !window.fbq) {
+    // @ts-ignore - fbq wird dynamisch hinzugefügt
+    window.fbq = function() {
+      // @ts-ignore
+      window._fbq = window._fbq || [];
+      // @ts-ignore
+      window._fbq.push(arguments);
+    };
+
+    // Facebook Pixel Script laden
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = 'https://connect.facebook.net/en_US/fbevents.js';
+    document.head.appendChild(script);
+
+    window.fbq('init', FB_PIXEL_ID);
+    window.fbq('track', 'PageView');
+  }
+};
+
+// Facebook Event tracking
+export const trackFBEvent = (event: string, params?: any) => {
+  if (!isCookieCategoryEnabled('marketing') || typeof window === 'undefined' || !window.fbq) {
+    return;
+  }
+
+  window.fbq('track', event, params);
+};
+
+// Funktionale Cookies initialisieren (Beispiel)
+export const initFunctionalCookies = () => {
+  if (!isCookieCategoryEnabled('functional')) {
+    return;
+  }
+
+  // Hier könnten Funktionen für funktionale Cookies implementiert werden
+  console.log('Funktionale Cookies initialisiert');
+};
+
+// Typdefinitionen für globale Objekte
 declare global {
   interface Window {
     initializeAnalytics: () => void;
+    fbq: (...args: any[]) => void;
+    _fbq: any[];
   }
 }
 
-// Make analytics initialization available globally for the cookie consent
+// Analytics-Funktionen global verfügbar machen (für den Cookie-Banner)
 window.initializeAnalytics = () => {
-  localStorage.setItem('cookieConsent', 'true');
   initGA();
   logPageView();
+
+  // Wenn die entsprechenden Cookie-Kategorien aktiviert sind,
+  // initialisiere auch andere Dienste
+  if (isCookieCategoryEnabled('marketing')) {
+    initFBPixel();
+  }
+
+  if (isCookieCategoryEnabled('functional')) {
+    initFunctionalCookies();
+  }
 };
+
+// Export der Namespace-Erweiterung
+export {};