Benjamin Admin
cb2d503e84
Phase A: Google Consent Mode v2 in cookie-banner-embed.ts
- gtag('consent', 'default', {...denied}) before banner loads
- gtag('consent', 'update', {...}) after user decision
- Automatic mapping: statistics→analytics_storage, marketing→ad_storage
Phase B: 5 Developer Portal pages at /sdk/consent/cookie-banner/
- Overview page with 4 cards
- Integration Guide: 3-step setup, script-tag, categories
- Google Consent Mode: automatic integration, parameter mapping
- Script Blocking: type=text/plain pattern, GA/FB/Hotjar examples
- Compliance Checklist: 12 points, 9 automatic
Sidebar navigation extended with Cookie-Banner section.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
|
|
|
|
export default function GoogleConsentModePage() {
|
|
return (
|
|
<div className="flex min-h-screen bg-white">
|
|
<SDKDocsSidebar />
|
|
<main className="flex-1 ml-64 p-8 max-w-4xl">
|
|
<div className="prose prose-gray max-w-none">
|
|
<h1>Google Consent Mode v2</h1>
|
|
<p className="text-lg text-gray-600">
|
|
Seit Maerz 2024 ist Google Consent Mode v2 Pflicht fuer alle Websites
|
|
die Google Analytics oder Google Ads im EWR nutzen.
|
|
</p>
|
|
|
|
<div className="bg-red-50 border border-red-200 rounded-xl p-4 my-6">
|
|
<h4 className="text-red-900 mt-0">Pflicht seit Maerz 2024</h4>
|
|
<p className="text-red-700 text-sm mb-0">
|
|
Ohne Google Consent Mode v2 verlieren Sie Messdaten von EWR-Besuchern.
|
|
Google Tags funktionieren moeglicherweise nicht mehr korrekt.
|
|
</p>
|
|
</div>
|
|
|
|
<h2>Was ist Google Consent Mode?</h2>
|
|
<p>
|
|
Google Consent Mode passt das Verhalten von Google Tags (Analytics, Ads)
|
|
automatisch an die Consent-Entscheidung des Nutzers an. Statt Tags komplett
|
|
zu blockieren, sendet Consent Mode anonymisierte Pings die Google fuer
|
|
Modellierung und Conversion-Tracking nutzen kann.
|
|
</p>
|
|
|
|
<h2>Automatische Integration</h2>
|
|
<p>
|
|
Der BreakPilot Cookie-Banner integriert Google Consent Mode v2 <strong>automatisch</strong>.
|
|
Sie muessen nichts zusaetzlich konfigurieren.
|
|
</p>
|
|
|
|
<h3>Was passiert im Hintergrund</h3>
|
|
|
|
<p><strong>Beim Laden der Seite (vor Banner):</strong></p>
|
|
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
|
|
{`// Automatisch vom Banner gesetzt — alles "denied"
|
|
gtag('consent', 'default', {
|
|
analytics_storage: 'denied',
|
|
ad_storage: 'denied',
|
|
ad_user_data: 'denied',
|
|
ad_personalization: 'denied',
|
|
functionality_storage: 'granted',
|
|
security_storage: 'granted',
|
|
});`}
|
|
</pre>
|
|
|
|
<p><strong>Nach Consent-Entscheidung des Nutzers:</strong></p>
|
|
<pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
|
|
{`// Automatisch nach Klick auf "Akzeptieren" oder "Auswahl speichern"
|
|
gtag('consent', 'update', {
|
|
analytics_storage: 'granted', // Wenn "Statistik" akzeptiert
|
|
ad_storage: 'granted', // Wenn "Marketing" akzeptiert
|
|
ad_user_data: 'granted',
|
|
ad_personalization: 'granted',
|
|
});`}
|
|
</pre>
|
|
|
|
<h2>Consent-Parameter Mapping</h2>
|
|
<table className="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Google Parameter</th>
|
|
<th>Banner-Kategorie</th>
|
|
<th>Beschreibung</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code>analytics_storage</code></td><td>Statistik</td><td>Google Analytics Cookies</td></tr>
|
|
<tr><td><code>ad_storage</code></td><td>Marketing</td><td>Werbe-Cookies (Google Ads)</td></tr>
|
|
<tr><td><code>ad_user_data</code></td><td>Marketing</td><td>Nutzerdaten fuer Werbung</td></tr>
|
|
<tr><td><code>ad_personalization</code></td><td>Marketing</td><td>Personalisierte Werbung</td></tr>
|
|
<tr><td><code>functionality_storage</code></td><td>Notwendig</td><td>Immer granted</td></tr>
|
|
<tr><td><code>security_storage</code></td><td>Notwendig</td><td>Immer granted</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Vorteile</h2>
|
|
<ul>
|
|
<li>Kein Datenverlust — Google modelliert fehlende Daten</li>
|
|
<li>DSGVO-konform — Tags feuern nur nach Consent</li>
|
|
<li>Automatisch — keine manuelle gtag()-Konfiguration noetig</li>
|
|
<li>EWR-konform — erfuellt Google-Anforderungen seit Maerz 2024</li>
|
|
</ul>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|