Cookies & Analytics
Set up GA4 with DSGVO-compliant cookie consent.
Overview
-
Create cookie consent banner component
-
Set up Google Analytics 4
-
Only load GA after consent
-
Store consent in localStorage
Cookie Consent Banner
Create components/cookie-consent.tsx :
'use client'
import { useState, useEffect } from 'react' import { Button } from '@/components/ui/button'
export function CookieConsent() { const [showBanner, setShowBanner] = useState(false)
useEffect(() => { const consent = localStorage.getItem('cookie-consent') if (!consent) setShowBanner(true) }, [])
const acceptAll = () => { localStorage.setItem('cookie-consent', 'all') setShowBanner(false) loadAnalytics() }
const acceptEssential = () => { localStorage.setItem('cookie-consent', 'essential') setShowBanner(false) }
if (!showBanner) return null
return ( <div className="fixed bottom-0 left-0 right-0 bg-background border-t p-4 z-50"> <div className="container flex flex-col md:flex-row items-center justify-between gap-4"> <p className="text-sm text-muted-foreground"> Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.{' '} <a href="/datenschutz" className="underline">Mehr erfahren</a> </p> <div className="flex gap-2"> <Button variant="outline" onClick={acceptEssential}> Nur notwendige </Button> <Button onClick={acceptAll}> Alle akzeptieren </Button> </div> </div> </div> ) }
function loadAnalytics() {
// Load GA4 script dynamically
const script = document.createElement('script')
script.src = https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}
script.async = true
document.head.appendChild(script)
window.dataLayer = window.dataLayer || [] function gtag(...args: any[]) { window.dataLayer.push(args) } gtag('js', new Date()) gtag('config', process.env.NEXT_PUBLIC_GA_ID) }
Environment Variables
Add to .env.local :
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX
Layout Integration
Add to app/layout.tsx :
import { CookieConsent } from '@/components/cookie-consent'
export default function RootLayout({ children }) { return ( <html> <body> {children} <CookieConsent /> </body> </html> ) }
Check Existing Consent on Load
Add to layout or a provider:
'use client'
import { useEffect } from 'react'
export function AnalyticsProvider({ children }) { useEffect(() => { const consent = localStorage.getItem('cookie-consent') if (consent === 'all') { loadAnalytics() } }, [])
return <>{children}</> }
Datenschutz Update
Add to Datenschutz page:
Google Analytics
Diese Website verwendet Google Analytics 4, einen Webanalysedienst der Google LLC. Die Nutzung erfolgt nur nach Ihrer ausdrücklichen Einwilligung.
Verarbeitete Daten:
- IP-Adresse (anonymisiert)
- Besuchte Seiten
- Verweildauer
- Geräte- und Browserinformationen
Rechtsgrundlage: Art. 6 Abs. 1 lit. a DSGVO (Einwilligung)
Sie können Ihre Einwilligung jederzeit widerrufen, indem Sie die Cookies in Ihrem Browser löschen.
Checklist
-
Cookie consent component created
-
GA4 only loads after consent
-
Consent stored in localStorage
-
Datenschutz updated with GA info
-
Environment variable set
-
Banner displays on first visit
-
"Nur notwendige" doesn't load GA
-
"Alle akzeptieren" loads GA