365 lines
10 KiB
Markdown
365 lines
10 KiB
Markdown
# Laravel GDPR/DSGVO Cookie Consent Manager
|
|
|
|
Ein leichtgewichtiges, DSGVO-konformes Cookie Consent Management System für Laravel. Es nutzt **Alpine.js** für die Frontend-Logik und ist speziell für die einfache Integration von Google Analytics 4 und Google Tag Manager (mit Google Consent Mode v2) entwickelt.
|
|
|
|
## Features
|
|
|
|
- 🇪🇺 **DSGVO Konform:** Skripte werden erst nach expliziter Zustimmung geladen (Prior Consent)
|
|
- 🔒 **Google Consent Mode v2:** Vollständige Integration mit Default-Einstellungen
|
|
- 📊 **Google Analytics 4:** Direktes GA4-Tracking mit IP-Anonymisierung
|
|
- 🏷️ **Google Tag Manager:** Alternativ GTM-Integration für komplexere Tag-Setups
|
|
- 🌍 **Mehrsprachig:** Deutsch und Englisch integriert, weitere Sprachen leicht hinzufügbar
|
|
- 🚀 **Performance:** Basiert auf Alpine.js, keine Server-Requests
|
|
- 🎨 **Flexibel:** Anpassbar über Blade-Komponenten und Tailwind CSS
|
|
- ⚙️ **Konfigurierbar:** Alle Optionen über Config steuerbar
|
|
- 📱 **Responsive:** Mobile-optimiertes Modal mit Animationen
|
|
- ♿ **Barrierefrei:** ARIA-Labels, Focus-Trap, Keyboard-Navigation
|
|
- 🍪 **Echte Cookies:** Speicherung als HTTP-Cookie mit konfigurierbarer Laufzeit
|
|
|
|
## Voraussetzungen
|
|
|
|
- PHP 8.1+
|
|
- Laravel 10+ oder 11+
|
|
- Alpine.js (via Livewire oder manuell eingebunden)
|
|
- Tailwind CSS (für das Standard-Styling)
|
|
|
|
## Installation
|
|
|
|
### 1. Package installieren
|
|
|
|
```bash
|
|
composer require acme/cookie-consent
|
|
```
|
|
|
|
Falls das Package lokal entwickelt wird, füge es in der `composer.json` hinzu:
|
|
|
|
```json
|
|
{
|
|
"repositories": [
|
|
{
|
|
"type": "path",
|
|
"url": "dev/acme/CookieConsent"
|
|
}
|
|
],
|
|
"require": {
|
|
"acme/cookie-consent": "@dev"
|
|
|
|
}
|
|
}
|
|
|
|
composer update acme/cookie-consent
|
|
|
|
composer update acme/cookie-consent && php artisan package:discover && php artisan config:clear && php artisan view:clear && php artisan cache:clear
|
|
```
|
|
|
|
### 2. Environment Variables
|
|
|
|
Füge deine Tracking-ID in die `.env` Datei ein. Du kannst entweder Google Analytics direkt **oder** den Google Tag Manager nutzen:
|
|
|
|
**Option A: Google Analytics direkt**
|
|
```dotenv
|
|
GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
|
|
```
|
|
|
|
**Option B: Google Tag Manager (empfohlen für komplexere Setups)**
|
|
```dotenv
|
|
GOOGLE_TAG_MANAGER_ID=GTM-XXXXXXXX
|
|
```
|
|
|
|
> **Hinweis:** Wenn beide IDs gesetzt sind, wird der Google Tag Manager bevorzugt. Der GTM lädt dann alle weiteren Tags (inkl. GA4) selbstständig über die GTM-Konfiguration.
|
|
|
|
Optionale Einstellungen:
|
|
|
|
```dotenv
|
|
COOKIE_CONSENT_ENABLED=true
|
|
COOKIE_CONSENT_LIFETIME=365
|
|
COOKIE_CONSENT_NAME=cookie_consent
|
|
```
|
|
|
|
### 3. Config veröffentlichen (Optional)
|
|
|
|
```bash
|
|
php artisan vendor:publish --tag=cookie-consent-config
|
|
```
|
|
|
|
Dies erstellt `config/cookie-consent.php` mit allen Einstellungsmöglichkeiten.
|
|
|
|
## Nutzung
|
|
|
|
### Basis-Einbindung (Google Analytics)
|
|
|
|
Füge die Komponente in dein Hauptlayout ein (idealerweise vor `</body>`):
|
|
|
|
```blade
|
|
<body>
|
|
{{-- Dein Content --}}
|
|
|
|
<x-cookie-consent::components.manager />
|
|
|
|
@livewireScripts
|
|
</body>
|
|
```
|
|
|
|
### Mit Google Tag Manager
|
|
|
|
Bei Nutzung des Google Tag Managers musst du zusätzlich die `gtm-noscript` Komponente **direkt nach dem öffnenden `<body>` Tag** einbinden:
|
|
|
|
```blade
|
|
<body>
|
|
{{-- GTM noscript (nur erforderlich bei GTM-Nutzung) --}}
|
|
<x-cookie-consent::components.gtm-noscript />
|
|
|
|
{{-- Dein Content --}}
|
|
|
|
{{-- Cookie Consent Manager (vor </body>) --}}
|
|
<x-cookie-consent::components.manager />
|
|
|
|
@livewireScripts
|
|
</body>
|
|
```
|
|
|
|
> **Wichtig:** Der `gtm-noscript` iframe wird von Google empfohlen und ermöglicht grundlegendes Tracking auch bei deaktiviertem JavaScript. Er wird nur geladen, wenn der Nutzer dem Tracking zugestimmt hat.
|
|
|
|
### Parameter überschreiben
|
|
|
|
Du kannst alle Parameter direkt bei der Einbindung überschreiben:
|
|
|
|
```blade
|
|
{{-- Mit Google Analytics --}}
|
|
<x-cookie-consent::components.manager
|
|
analytics-id="G-SPECIAL-ID"
|
|
cookie-lifetime="180"
|
|
button-position="bottom-right"
|
|
/>
|
|
|
|
{{-- Mit Google Tag Manager --}}
|
|
<x-cookie-consent::components.manager
|
|
gtm-id="GTM-SPECIAL-ID"
|
|
cookie-lifetime="180"
|
|
button-position="bottom-right"
|
|
/>
|
|
|
|
{{-- GTM noscript kann auch überschrieben werden --}}
|
|
<x-cookie-consent::components.gtm-noscript
|
|
gtm-id="GTM-SPECIAL-ID"
|
|
/>
|
|
```
|
|
|
|
## Mehrsprachigkeit
|
|
|
|
Das Package unterstützt automatische Spracherkennung über `app()->getLocale()`.
|
|
|
|
### Verfügbare Sprachen
|
|
|
|
- 🇩🇪 **Deutsch** (de) - Standardsprache
|
|
- 🇬🇧 **Englisch** (en)
|
|
|
|
### Sprachdateien veröffentlichen
|
|
|
|
Um die Übersetzungen anzupassen oder weitere Sprachen hinzuzufügen:
|
|
|
|
```bash
|
|
php artisan vendor:publish --tag=cookie-consent-lang
|
|
```
|
|
|
|
Die Dateien werden nach `lang/vendor/cookie-consent/` in deinem Laravel-Projekt kopiert.
|
|
|
|
### Eigene Sprache hinzufügen
|
|
|
|
1. Kopiere `lang/vendor/cookie-consent/de/cookie-consent.php`
|
|
2. Erstelle z.B. `lang/vendor/cookie-consent/fr/cookie-consent.php`
|
|
3. Übersetze alle Texte
|
|
|
|
### Sprache setzen
|
|
|
|
Die Sprache wird automatisch aus Laravel übernommen:
|
|
|
|
```php
|
|
// In Middleware, Controller oder ServiceProvider
|
|
app()->setLocale('en'); // Wechselt zu Englisch
|
|
|
|
// Oder basierend auf Benutzereinstellung
|
|
app()->setLocale(auth()->user()->language ?? 'de');
|
|
```
|
|
|
|
## Cookie-Einstellungen manuell öffnen
|
|
|
|
Laut DSGVO muss der Nutzer seine Entscheidung jederzeit ändern können. Das Package stellt dafür einen Event-Listener bereit:
|
|
|
|
```html
|
|
<a href="#" @click.prevent="$dispatch('open-cookie-settings')">
|
|
Cookie-Einstellungen bearbeiten
|
|
</a>
|
|
```
|
|
|
|
Oder mit Vanilla JavaScript:
|
|
|
|
```html
|
|
<a href="#" onclick="window.dispatchEvent(new CustomEvent('open-cookie-settings')); return false;">
|
|
Cookie-Einstellungen
|
|
</a>
|
|
```
|
|
|
|
## Datenschutzerklärung Komponente
|
|
|
|
Das Package enthält eine spezielle Komponente für deine Datenschutzerklärung, die:
|
|
- Die aktuellen Cookie-Einstellungen des Nutzers anzeigt
|
|
- Einen Button zum Ändern der Einstellungen bietet
|
|
- Ausführliche Informationen zu Google Analytics bereitstellt
|
|
|
|
### Einbindung
|
|
|
|
```blade
|
|
{{-- In deiner Datenschutz-Seite --}}
|
|
<x-cookie-consent::components.privacy-info />
|
|
```
|
|
|
|
### Parameter
|
|
|
|
```blade
|
|
<x-cookie-consent::components.privacy-info
|
|
:show-analytics-info="true" {{-- GA-Infos anzeigen --}}
|
|
:show-current-settings="true" {{-- Aktuelle Einstellungen anzeigen --}}
|
|
:show-change-button="true" {{-- Ändern-Button anzeigen --}}
|
|
/>
|
|
```
|
|
|
|
### Nur bestimmte Teile anzeigen
|
|
|
|
```blade
|
|
{{-- Nur die Cookie-Übersicht mit Button --}}
|
|
<x-cookie-consent::components.privacy-info
|
|
:show-analytics-info="false"
|
|
/>
|
|
|
|
{{-- Nur die GA-Infos (ohne Einstellungs-Box) --}}
|
|
<x-cookie-consent::components.privacy-info
|
|
:show-current-settings="false"
|
|
:show-change-button="false"
|
|
/>
|
|
```
|
|
|
|
Die Komponente aktualisiert sich automatisch, wenn der Nutzer seine Cookie-Einstellungen ändert (via `cookie-consent-updated` Event).
|
|
|
|
## Konfiguration
|
|
|
|
Die vollständige Konfigurationsdatei (`config/cookie-consent.php`):
|
|
|
|
```php
|
|
<?php
|
|
|
|
return [
|
|
// Cookie Manager aktivieren/deaktivieren
|
|
'enabled' => env('COOKIE_CONSENT_ENABLED', true),
|
|
|
|
// Google Analytics 4 Tracking ID
|
|
'analytics_id' => env('GOOGLE_ANALYTICS_ID', ''),
|
|
|
|
// Google Tag Manager ID (hat Priorität über analytics_id)
|
|
'gtm_id' => env('GOOGLE_TAG_MANAGER_ID', ''),
|
|
|
|
// Cookie Lebensdauer in Tagen (DSGVO: max. 12 Monate empfohlen)
|
|
'cookie_lifetime' => env('COOKIE_CONSENT_LIFETIME', 365),
|
|
|
|
// Name des Consent-Cookies
|
|
'cookie_name' => env('COOKIE_CONSENT_NAME', 'cookie_consent'),
|
|
|
|
// Links für Datenschutz und Impressum
|
|
'links' => [
|
|
'privacy' => '/datenschutz',
|
|
'imprint' => '/impressum',
|
|
],
|
|
|
|
// Position des Floating-Buttons: 'bottom-left' oder 'bottom-right'
|
|
'button_position' => 'bottom-left',
|
|
|
|
// IP-Anonymisierung für Google Analytics (bei GTM in GTM konfigurieren)
|
|
'anonymize_ip' => true,
|
|
];
|
|
```
|
|
|
|
## Google Consent Mode v2
|
|
|
|
Das Package implementiert den Google Consent Mode v2 vollständig:
|
|
|
|
1. **Default-Einstellungen** werden VOR dem Laden von GA/GTM gesetzt (alles `denied`)
|
|
2. Bei Zustimmung wird ein **Consent Update** gesendet
|
|
3. GA4/GTM-Script wird erst NACH Zustimmung dynamisch geladen
|
|
|
|
Diese Implementierung entspricht den aktuellen Google-Anforderungen (März 2024).
|
|
|
|
## Google Tag Manager
|
|
|
|
Für komplexere Tracking-Setups empfehlen wir den Google Tag Manager statt direktem GA4:
|
|
|
|
### Vorteile von GTM
|
|
|
|
- **Zentrale Verwaltung:** Alle Tags (GA4, Ads, Meta, etc.) über eine Oberfläche
|
|
- **Keine Code-Änderungen:** Neue Tags können ohne Deployment hinzugefügt werden
|
|
- **Debugging:** Eingebauter Vorschau-Modus zum Testen
|
|
- **Trigger & Variablen:** Komplexe Regeln ohne Programmierung
|
|
|
|
### Einrichtung
|
|
|
|
1. Setze `GOOGLE_TAG_MANAGER_ID` in der `.env`
|
|
2. Füge `<x-cookie-consent::components.gtm-noscript />` direkt nach `<body>` ein
|
|
3. Konfiguriere GA4 und andere Tags im GTM-Interface
|
|
|
|
### Consent Mode im GTM
|
|
|
|
Der Consent Mode wird automatisch übermittelt. Im GTM solltest du:
|
|
|
|
1. **Consent-Einstellungen aktivieren:** Admin > Container-Einstellungen > Consent-Übersicht aktivieren
|
|
2. **Tags konfigurieren:** Bei jedem Tag die "Einwilligungsprüfungen" entsprechend setzen
|
|
3. **GA4-Tag:** "analytics_storage" auf "Erforderlich" setzen
|
|
|
|
## Design Anpassen
|
|
|
|
Views veröffentlichen:
|
|
|
|
```bash
|
|
php artisan vendor:publish --tag=cookie-consent-views
|
|
```
|
|
|
|
Die Dateien liegen dann unter `resources/views/vendor/cookie-consent/`.
|
|
|
|
## Server-seitige Prüfung
|
|
|
|
Da der Consent als echtes Cookie gespeichert wird, kannst du ihn auch serverseitig prüfen:
|
|
|
|
```php
|
|
// In einem Controller oder Middleware
|
|
$consent = json_decode(request()->cookie('cookie_consent'), true);
|
|
|
|
if ($consent && $consent['analytics'] === true) {
|
|
// Analytics-Tracking erlaubt
|
|
}
|
|
```
|
|
|
|
## Alle Assets veröffentlichen
|
|
|
|
```bash
|
|
# Config
|
|
php artisan vendor:publish --tag=cookie-consent-config
|
|
|
|
# Views
|
|
php artisan vendor:publish --tag=cookie-consent-views
|
|
|
|
# Sprachdateien
|
|
php artisan vendor:publish --tag=cookie-consent-lang
|
|
|
|
# Alles auf einmal
|
|
php artisan vendor:publish --provider="Acme\CookieConsent\CookieConsentServiceProvider"
|
|
```
|
|
|
|
## Rechtlicher Hinweis
|
|
|
|
Dieses Package bietet eine technische Grundlage für DSGVO-konformes Tracking ("Privacy by Design"). **Es ersetzt keine anwaltliche Beratung.** Der Betreiber der Website ist dafür verantwortlich, dass:
|
|
|
|
- Die Datenschutzerklärung vollständig und korrekt ist
|
|
- Alle eingesetzten Tracking-Dienste dort aufgeführt sind
|
|
- Die Cookie-Einwilligung nachweisbar dokumentiert wird
|
|
|
|
## Lizenz
|
|
|
|
MIT License
|