Consent banner presents separate toggles per purpose; non-essential categories default to off

GDPR Art. 7 and Art. 4(11) define valid consent as freely given, specific, informed, and unambiguous — requiring an affirmative act. Pre-ticked boxes are explicitly prohibited. A cookie banner with a single 'Accept All' button and no per-category breakdown fails both the granularity requirement and the specificity requirement: users cannot meaningfully consent to 'analytics' and 'advertising' as a single undifferentiated mass. The ePrivacy Directive Art. 5(3) separately requires consent before setting non-essential cookies. Analytics scripts that fire unconditionally on page load — before the user has interacted with any banner — are violating both frameworks simultaneously, and this is detectable by any regulator with a browser dev tools panel.

Implement a consent banner with separate, independently toggleable categories, all defaulting to false. Conditional script loading must gate on the stored consent value.

// components/ConsentBanner.tsx — key structural requirements
const [choices, setChoices] = useState<ConsentChoices>({
  analytics: false,  // MUST default to false — Art. 7 requires affirmative opt-in
  marketing: false,
})

// Non-essential scripts must not load until consent is granted:
function applyConsent(choices: ConsentChoices) {
  if (choices.analytics) {
    // dynamically load analytics script only after explicit consent
    loadScript('https://www.googletagmanager.com/gtag/js?id=GA_ID')
  }
}

Ensure users can 'Reject all non-essential' in a single click — the same effort as accepting. In Next.js, use next/script with strategy="lazyOnload" and only render it after consent. Never use strategy="beforeInteractive" or strategy="afterInteractive" for non-essential scripts.