From 867168ae9974b4014823f7f0d584af904252ff12 Mon Sep 17 00:00:00 2001 From: Damjan Savic Date: Fri, 18 Apr 2025 16:06:14 +0200 Subject: [PATCH] Fix Cookie Banner. --- src/components/CookieBanner.tsx | 149 +++++++++++++++++++++++++++++--- src/utils/analytics.ts | 94 ++++++++++++++++++-- 2 files changed, 224 insertions(+), 19 deletions(-) diff --git a/src/components/CookieBanner.tsx b/src/components/CookieBanner.tsx index 3361967..569de4e 100644 --- a/src/components/CookieBanner.tsx +++ b/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 - if (parsedSettings.analytics) { - initGA(); - logPageView(); - } + // Lade die entsprechenden Dienste basierend auf den Einstellungen + initializeServices(parsedSettings); } } 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) { - initGA(); - logPageView(); - } + // Initialisiere Dienste basierend auf den ausgewählten Einstellungen + initializeServices(cookieSettings); setShowSettings(false); }; @@ -133,8 +216,8 @@ const CookieBanner = () => { localStorage.setItem('cookieConsent', 'true'); setCookieSettings(allSettings); - initGA(); - logPageView(); + // Initialisiere alle Dienste + initializeServices(allSettings); setShowSettings(false); }; @@ -225,6 +308,17 @@ const CookieBanner = () => {
{getText('alwaysActive')}

{getText('necessaryDesc')}

+ + {/* Services List */} +
+ {cookieServices.essentiell.services.map((service, index) => ( +
+
{service.name}
+
Anbieter: {service.provider}
+
Zweck: {service.purpose}
+
+ ))} +
{/* Analytics cookies */} @@ -242,6 +336,17 @@ const CookieBanner = () => {

{getText('analyticsDesc')}

+ + {/* Services List */} +
+ {cookieServices.analyse.services.map((service, index) => ( +
+
{service.name}
+
Anbieter: {service.provider}
+
Zweck: {service.purpose}
+
+ ))} +
{/* Marketing cookies */} @@ -259,6 +364,17 @@ const CookieBanner = () => {

{getText('marketingDesc')}

+ + {/* Services List */} +
+ {cookieServices.marketing.services.map((service, index) => ( +
+
{service.name}
+
Anbieter: {service.provider}
+
Zweck: {service.purpose}
+
+ ))} +
{/* Functional cookies */} @@ -276,6 +392,17 @@ const CookieBanner = () => {

{getText('functionalDesc')}

+ + {/* Services List */} +
+ {cookieServices.funktional.services.map((service, index) => ( +
+
{service.name}
+
Anbieter: {service.provider}
+
Zweck: {service.purpose}
+
+ ))} +
diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts index cbd3cc5..7aaeae8 100644 --- a/src/utils/analytics.ts +++ b/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(); -}; \ No newline at end of file + + // Wenn die entsprechenden Cookie-Kategorien aktiviert sind, + // initialisiere auch andere Dienste + if (isCookieCategoryEnabled('marketing')) { + initFBPixel(); + } + + if (isCookieCategoryEnabled('functional')) { + initFunctionalCookies(); + } +}; + +// Export der Namespace-Erweiterung +export {}; \ No newline at end of file