Cookie consent banners are one of the most visible — and most frequently violated — privacy requirements on the web. Getting them wrong can lead to GDPR fines, user trust issues, and legal action from privacy advocates. This guide covers everything you need to implement a compliant, user-friendly consent banner.
Why Cookie Consent Matters
Under GDPR and the ePrivacy Directive, you must obtain informed, specific, and freely given consent before placing non-essential cookies on a visitor's device. "Non-essential" includes analytics cookies (Google Analytics), advertising cookies (Facebook Pixel), and any third-party tracking scripts.
Enforcement is increasing: In 2024 alone, regulators issued over €100M in fines for cookie violations. The French CNIL fined Google €150M and Facebook €60M specifically for making it harder to reject cookies than to accept them.
What Makes a Banner Compliant?
| Requirement | Compliant | Non-Compliant |
|---|---|---|
| Reject option | "Accept All" and "Reject All" buttons at the same level | Reject buried in settings or absent |
| Pre-selection | No cookies pre-checked | Analytics or marketing pre-checked |
| Cookie wall | Site accessible without consent | Blocking access until consent given |
| Forced consent | Content accessible with essential cookies only | "Accept cookies or leave" |
| Withdraw consent | Easy to change preferences anytime | No way to revoke after accepting |
| Information | Clear categories and purposes | Vague "we use cookies to improve experience" |
The 5 Categories of Cookies
1. Strictly Necessary (No consent needed)
Cookies required for the website to function: session cookies, authentication tokens, shopping cart cookies, CSRF protection, load balancing.
2. Functional (Consent required)
Cookies that enhance functionality but aren't essential: language preferences, user interface customization, chat widget state.
3. Analytics (Consent required)
Cookies that measure website performance: Google Analytics, Hotjar, Plausible (even privacy-friendly analytics may require consent depending on configuration).
4. Marketing/Advertising (Consent required)
Cookies used for targeted advertising: Facebook Pixel, Google Ads, LinkedIn Insight Tag, retargeting cookies.
5. Third-Party/Social (Consent required)
Cookies set by embedded content: YouTube embeds, social media widgets, embedded maps, comment systems.
Implementation Best Practices
Technical Architecture
- Block scripts before consent: Use
type="text/plain"for tracking scripts and change them totype="text/javascript"after consent - Load essential scripts normally: Don't block scripts that are strictly necessary
- Listen for consent events: Fire analytics only after the user opts in
- Support Google Consent Mode v2: Required for Google Ads remarketing since March 2024. Use the Consent Mode documentation for implementation details
Design Guidelines
- Place the banner at the bottom or center of the page — avoid top banners that look like ads
- "Accept" and "Reject" buttons must have equal visual weight (same size, color prominence)
- Use clear language: "Accept All Cookies" / "Reject Non-Essential" / "Manage Preferences"
- Show a brief explanation of each cookie category
- Provide a link to your full cookie/privacy policy
Common Mistakes
- Dark patterns in consent: Making "Accept" a bright button and "Reject" a tiny text link. This is explicitly cited by CNIL and ICO as non-compliant. See our guide on dark patterns.
- Loading trackers before consent: Google Analytics firing on page load before the banner appears. This is the most common technical violation.
- No audit of actual cookies: Installing a consent banner without scanning what cookies your site actually sets. Many CMS plugins and themes add cookies you don't know about.
- Not recording consent: You must be able to demonstrate that a user gave consent. Store the timestamp, version, and choices made.
- Ignoring non-EU visitors: Even if CCPA uses opt-out, many other countries (Brazil's LGPD, South Korea's PIPA) also require opt-in consent.
Google Consent Mode v2
Since March 2024, Google requires Consent Mode v2 for any website using Google Ads remarketing or personalization for EEA users. Consent Mode signals whether the user has granted consent for analytics and ad cookies.
analytics_storage: Controls Google Analytics cookiesad_storage: Controls Google Ads cookiesad_user_data: Controls sending user data to Google for adsad_personalization: Controls ad personalization features
Quick Start with PrivacyChecker
PrivacyChecker Pro includes a ready-to-use Cookie Banner Widget that handles consent management, Google Consent Mode v2, granular category control, and proof-of-consent recording — all with a single line of code.
Start with a free scan to see what cookies and trackers your website currently loads, then upgrade to Pro for the widget and step-by-step fix guides.