gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
b2in/packages/acme/CookieConsent/readme.md
Kevin Adametz 4bb89aad8c 10-04-2026
2026-04-10 17:18:17 +02:00

10 KiB
Raw Blame History

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

composer require acme/cookie-consent

Falls das Package lokal entwickelt wird, füge es in der composer.json hinzu:

{
    "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

GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX

Option B: Google Tag Manager (empfohlen für komplexere Setups)

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:

COOKIE_CONSENT_ENABLED=true
COOKIE_CONSENT_LIFETIME=365
COOKIE_CONSENT_NAME=cookie_consent

3. Config veröffentlichen (Optional)

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>):

<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:

<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:

{{-- 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:

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:

// 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:

<a href="#" @click.prevent="$dispatch('open-cookie-settings')">
    Cookie-Einstellungen bearbeiten
</a>

Oder mit Vanilla JavaScript:

<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

{{-- In deiner Datenschutz-Seite --}}
<x-cookie-consent::components.privacy-info />

Parameter

<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

{{-- 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

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:

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:

// 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

# 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