Non-essential scripts only load after consent is granted for that category

Placing a compliant consent banner on your page while loading Google Analytics, Facebook Pixel, or Hotjar unconditionally in layout.tsx is security theater — the compliance UI exists but the data collection proceeds regardless of what the user clicks. ePrivacy Directive Art. 5(3) and GDPR Art. 6(1)(a) both require that non-essential cookies and tracking technologies activate only after the user's informed consent. Unconditional script loading in root layout files is the most common technical GDPR violation in Next.js applications, and it is trivially detectable from the browser network panel. Google Tag Manager compounds this risk because tags added via the GTM UI bypass the codebase entirely and may fire before any consent check.

Configure Google Consent Mode v2 to deny all non-essential storage by default, before the analytics library initializes. Update consent grants only after explicit user action.

// lib/consent-init.ts — call as early as possible in app bootstrap
export function initConsentMode() {
  if (typeof window === 'undefined') return
  window.dataLayer = window.dataLayer ?? []
  function gtag(..._args: unknown[]) { window.dataLayer.push(arguments) }
  gtag('consent', 'default', {
    analytics_storage: 'denied',
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
  })
}

// In ConsentBanner's save() — update grants after user accepts
function applyConsent(choices: ConsentChoices) {
  window.gtag?.('consent', 'update', {
    analytics_storage: choices.analytics ? 'granted' : 'denied',
    ad_storage: choices.marketing ? 'granted' : 'denied',
  })
}

For GTM: configure a Consent Initialization trigger and set all non-essential tags to fire only when analytics_storage: 'granted'. Remove any unconditional <Script> tags for analytics or advertising from app/layout.tsx.