# Consent banner is present for cookie-based analytics

- **Pattern:** `ab-001708` (`marketing-analytics.privacy-compliance.consent-banner-present`)
- **Severity:** critical
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001708
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001708)

## Why it matters

Deploying cookie-based analytics (GA4, Mixpanel, Amplitude, Segment) without a consent banner violates GDPR Art. 6 and Art. 7 for EU/EEA visitors and CCPA §1798.120 for California residents. Regulators treat the absence of a consent mechanism as a strict liability violation — no harm needs to be proved. DPA enforcement actions have resulted in fines up to 4% of global annual turnover. Beyond legal exposure, analytics data collected without lawful basis cannot be legally used and may need to be deleted entirely.

## Severity rationale

Critical because collecting persistent tracking cookies without user consent is a per-visit GDPR violation with direct regulatory fine exposure under Art. 83.

## Remediation

Integrate a consent management platform or build a minimal consent banner before loading any cookie-based analytics script. The simplest compliant path is a third-party CMP (CookieYes, Cookiebot) that handles jurisdiction detection and record-keeping automatically. If building in-house, gate analytics initialization inside the banner's accept handler:

```tsx
// components/CookieBanner.tsx
'use client'
export function CookieBanner() {
  return (
    <div>
      <p>We use analytics cookies to understand how visitors use this site.</p>
      <button onClick={() => {
        localStorage.setItem('analytics_consent', 'true')
        initAnalytics()
      }}>Accept</button>
      <button onClick={() => localStorage.setItem('analytics_consent', 'false')}>Decline</button>
    </div>
  )
}
```

Alternatively, switch to a cookie-free tool (Plausible, Fathom) and eliminate the consent requirement entirely.

## Detection

- **ID:** `consent-banner-present`
- **Severity:** `critical`
- **What to look for:** If the project uses cookie-based analytics (GA4, Mixpanel, Amplitude, Heap, Segment with persistent IDs), a consent banner is legally required for users in GDPR-applicable regions (EU/EEA) and California (CCPA). Look for:
  - Consent banner components: `ConsentBanner`, `CookieBanner`, `CookieConsent`, `GDPRBanner`, `PrivacyBanner`, or similar names
  - Third-party consent management platforms: OneTrust, Cookiebot, CookieYes, Axeptio in `package.json` or as external scripts
  - A `cookies` or `privacy` or `consent` utility in `lib/` or `utils/`
  - Cookie consent state stored in `localStorage` or cookies (`cookieConsent`, `gdpr_consent`, `analytics_consent`)

  Note: Cookie-free analytics (Plausible, Fathom, most server-side analytics) do not require a consent banner — they are designed for cookie-free, privacy-preserving operation. If the project uses only these tools, this check passes with a note.
- **Pass criteria:** At least 1 consent banner component or third-party CMP is present, OR the project uses only cookie-free analytics tools (Plausible, Fathom, Pirsch, Umami, or Vercel Analytics which uses no cookies). Count the number of consent-related components found and report the count.
- **Fail criteria:** Cookie-based analytics (GA4, Mixpanel, Amplitude, Segment, Heap, Hotjar, or similar) is used and no consent banner or CMP is found anywhere in the codebase.
- **Cross-reference:** For broader data privacy compliance beyond analytics consent, the AI Data Privacy audit examines PII handling, data retention, and exposure patterns across the full codebase.
- **Skip (N/A) when:** No analytics is present (`script-present` failed).
- **Detail on fail:** `"Google Analytics 4 (cookie-based) detected but no consent banner component found. This violates GDPR for EU visitors and CCPA for California residents. Analytics data collection without consent exposes the project to regulatory action."`
- **Remediation:** You need a consent banner before loading cookie-based analytics. Options:

  1. **Use a consent management platform (recommended for most projects):** Integrate CookieYes, Cookiebot, or OneTrust — these handle the legal complexity for you.

  2. **Build a minimal consent banner** that stores the user's choice before initializing analytics:

  ```tsx
  // Show on first visit, store choice
  function CookieBanner() {
    return (
      <div>
        <p>We use analytics cookies to improve this site.</p>
        <button onClick={() => { localStorage.setItem('analytics_consent', 'true'); initAnalytics() }}>Accept</button>
        <button onClick={() => localStorage.setItem('analytics_consent', 'false')}>Decline</button>
      </div>
    )
  }
  ```

  3. **Switch to a cookie-free analytics tool** (Plausible, Fathom) — no consent banner required.

## External references

- gdpr Art. 6
- gdpr Art. 7
- eprivacy Art. 5(3)
- ccpa §1798.120

Taxons: privacy-consent, regulatory-conformance

HTML version: https://auditbuffet.com/patterns/ab-001708