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