damjan_savic/Portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Cookie Banner.

Browse Source
This commit is contained in:
damjan_savic
2025-04-18 16:06:14 +02:00
parent 5c3da709df
commit 867168ae99
2 changed files with 224 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CookieBanner.tsx
+138 -11
View File
@@ -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 = () => {
<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
+85 -7
View File
@@ -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 {};