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

ePrivacy Art. 5(3) prohibits accessing or storing information on a device without prior consent. GDPR Art. 6(1)(a) requires a lawful basis — and for non-essential tracking, consent is the only available basis. When GA4, Facebook Pixel, or Segment loads via a static <script> tag or an unconditional strategy='afterInteractive' Next.js <Script>, it fires before any user interaction, collecting device identifiers and behavioral data without a lawful basis. CCPA §1798.135 imposes the parallel obligation for California residents' right to opt out of sale/sharing of personal information, which ad pixels facilitate. This is the most commonly litigated technical failure in DPA enforcement actions.

Either use GA4 Consent Mode v2 with analytics_storage: 'denied' as the default (the only pattern that allows GA4 in the static layout), or move all other non-essential scripts into a loadApprovedScripts() function called only after the user saves consent.

// GA4 Consent Mode v2 — set the denied default BEFORE the gtag script tag
<Script id="consent-defaults" strategy="beforeInteractive">{`
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    analytics_storage: 'denied',
    ad_storage: 'denied',
    ad_user_data: 'denied',
    ad_personalization: 'denied',
  });
`}</Script>
<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX" strategy="afterInteractive" />

For scripts without Consent Mode support (Segment, Hotjar, Facebook Pixel), inject them into the DOM only inside the consent callback in src/lib/consent-scripts.ts. Never place them as static <Script> tags with strategy='afterInteractive' — that strategy is not consent-aware.