GDPR-Compliant Analytics with Consent That Actually Works

I rebuilt analytics for the German market with Cookiekit and Google Consent Mode v2. Default-deny. Nothing loads until the user says yes. A small consent hook and an analytics provider keep it testable. The analytics code runs only on the client, so the build stays clean. Verified in Chrome DevTools: no cookies, no network calls, until opt-in.

The Problem

Too many sites collect “just a little” data before consent. In Germany that’s not okay. Even pseudonymous analytics count as personal data. I wanted insight only after agreement — not a gray area that might bite later.

What I Built

A consent-first analytics layer on Cookiekit with Consent Mode v2 for React / Next.js.

How it behaves:

• Default-deny from the first paint.
• No analytics script loads until the user opts in.
• Once consent is given, analytics injects and starts clean.
• The consent state lives in one place, easy to test and reason about.
• All analytics logic runs client-side, keeping SSR stable.

What I explicitly deny by default:

• `analytics_storage: denied`
• `ad_storage: denied`
• `ad_user_data: denied`
• `ad_personalization: denied`

I’m using the basic behavior model — no cookieless pings, no “pre-consent” measurement. Silence until yes.

The Outcome

• Before consent: zero cookies, zero tracking requests.
• After consent: analytics starts, consent state stays in sync, and users can revoke cleanly.
• Build stability: analytics exists only on the client, no server-side errors.
• Config: one environment variable for GA4 makes it portable across projects.

Why This Matters

This is where frontend architecture, law, and reliability meet. It shows a setup of analytics that respect users, pass an audit, and still give teams the numbers they need without legal suspense.

What I Check Every Deploy

• Network tab: no calls to Google domains pre-consent.
• Application tab: no non-essential cookies set pre-consent.
• CMP logs: consent captured, reversible, and exportable.
• Accessibility: banner focus order, keyboard escape, reject-all parity.
• Locale: German copy is clear and links to a real privacy policy.

Review

• Consent Mode v2 integrated end-to-end.
• CMP wired into React state so product teams can trust it.
• Compliant by design, not by accident.