Cookie Consent for the
JAMstack — No
Provider Wiring.
On a Next.js, Gatsby, or Astro site, third-party scripts get injected through next/script, gatsby-ssr, Astro layouts, or a tag manager — and they fire during hydration before any React-based consent provider has mounted. ConsentPixel — Privacy · Verified runs as one framework-agnostic script in the document head, blocking tracking before your framework hydrates. No provider to wire up, no hydration race, no SSR/CSR mismatch.
Why Consent Is Hard on Next.js, Gatsby, and Astro
JAMstack frameworks render fast and inject scripts in several ways: next/script with its strategy options, gatsby-ssr.js and plugins like gatsby-plugin-google-gtag, Astro layout scripts, or a Google Tag Manager container in the document head. The hard part is timing. Tracking scripts often execute during or immediately after hydration — before a React or Astro-island consent provider has mounted and read the visitor's choice.
The result is a race condition: your consent UI renders a moment after the analytics and pixel scripts have already fired. A consent provider written as a React component cannot reliably gate scripts that the framework injects at or before hydration.
A consent provider implemented as a React context lives inside the component tree — it only takes effect after the framework hydrates. But next/script with beforeInteractive, GTM in the head, and many gatsby plugins inject and run scripts before or during hydration.
So the very scripts you most need to gate — GA4, Meta Pixel, GTM — are the ones a component-tree provider is structurally unable to hold. ConsentPixel runs as a plain head script that initialises before the framework boots, closing the race.
✗ next/script beforeInteractive fires early
Scripts with the beforeInteractive strategy run before hydration — a React provider has not mounted to gate them.
✗ GTM in head fires on load
A GTM container in your _document or layout head fires its tags before any provider component exists.
✗ gatsby-plugin-* injects at build
Analytics plugins inject tags into the SSR output that fire on first paint, ahead of client-side consent logic.
✗ SSR/CSR consent mismatch
Reading consent state server-side vs client-side without care produces hydration mismatches and flashes of the wrong UI.
You can solve this in-house — but it means carefully ordering a head script, managing consent state outside the component tree, wiring Google Consent Mode v2 by hand, and maintaining it through every framework upgrade. ConsentPixel does all of that as one script tag and a dashboard.
Trackers Commonly Running on JAMstack Sites
Next.js, Gatsby, and Astro sites are typically product, SaaS, and developer-marketing sites carrying analytics, product-analytics, and advertising stacks. These are the most common integrations and the exposure each creates.
React Consent Provider vs. ConsentPixel
A component-tree consent provider and ConsentPixel differ in where they run. The provider runs after hydration; ConsentPixel runs before the framework boots, which is where script blocking has to happen.
| Capability | React/Astro Consent Provider | ConsentPixel |
|---|---|---|
| Blocks scripts before hydration | ✗ Runs after hydration | ✓ Head script, pre-hydration |
| Blocks next/script beforeInteractive | ✗ Too late | ✓ Yes |
| Blocks GTM in document head | ✗ No | ✓ Yes |
| Google Consent Mode v2 (all 4 params) | ⚠ Manual wiring | ✓ Built in |
| Global Privacy Control (GPC) detection | ⚠ Manual | ✓ Auto-detected |
| CIPA session-replay blocking | ⚠ DIY | ✓ Yes |
| US state law opt-out (19 states) | ✗ DIY | ✓ All plans |
| Timestamped consent audit log | ✗ DIY / none | ✓ Full log, exportable |
| No framework-upgrade maintenance | ✗ Breaks with refactors | ✓ Independent of build |
See what fires during hydration on your JAMstack site
ConsentPixel scans your deployed site in a fresh session and shows every script that fires before consent — including tags injected by next/script, gatsby plugins, and Astro layouts.
How to Install ConsentPixel on Next.js, Gatsby, or Astro
ConsentPixel installs as a single script in the document head — framework-agnostic, no npm package, no provider. The key is placing it as the first script so it initialises before your framework hydrates and before any tracking script runs.
Create your ConsentPixel account and scan your site
Sign up at consentpixel.com, add your deployed domain, and run the auto-scanner. ConsentPixel maps every tracker across your routes — including tags injected by next/script, gatsby plugins, and Astro layouts. Copy your unique pixel snippet.
Next.js — add to the document head (App or Pages Router)
App Router: add ConsentPixel in app/layout.tsx using next/script with the beforeInteractive strategy, or as a raw tag in the head. Pages Router: add it in pages/_document.tsx inside <Head> as the first script.
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<head>
<Script
src="https://pixel.consentpixel.com/YOUR-SITE-ID.js"
strategy="beforeInteractive"
/>
</head>
<body>{children}</body>
</html>
)
}Gatsby — add via gatsby-ssr.js onRenderBody
In gatsby-ssr.js, use setHeadComponents to inject ConsentPixel as the first head script, before gatsby-plugin-google-gtag or any analytics plugin output.
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<script
key="consentpixel"
src="https://pixel.consentpixel.com/YOUR-SITE-ID.js"
async
/>,
])
}Astro — add to your base layout head
In your base layout (e.g. src/layouts/Base.astro), place the ConsentPixel script as the first element in <head>, before any analytics islands or GTM.
<head> <!-- ConsentPixel — first in head --> <script src="https://pixel.consentpixel.com/YOUR-SITE-ID.js" async></script> <!-- analytics / GTM below --> </head>
Register your scripts and configure GCM v2
In the ConsentPixel dashboard, register each tool by category: Analytics (GA4), Product Analytics (PostHog, Amplitude), Marketing (Meta, LinkedIn), Session Recording (Hotjar, Clarity, PostHog replay). ConsentPixel holds each category until consent.
Enable Google Consent Mode v2 — ConsentPixel sets all four parameters before any Google tag loads, so you don't hand-wire gtag('consent','default',…) yourself.
What ConsentPixel Does for Your JAMstack Site
Blocks before the framework boots
Runs as a head script that initialises before React or Astro hydrates — so it gates the next/script, GTM, and plugin-injected tags a component-tree provider cannot reach in time.
Zero dependencies, no provider
No npm package, no context provider, no hooks to wire. One script tag in your layout or _document head. Nothing to refactor when you upgrade the framework.
Google Consent Mode v2 — done for you
Sets all four GCM v2 parameters before any Google tag loads, so you skip the brittle hand-written gtag consent default wiring.
GPC browser signal detection
Honours the Global Privacy Control signal for California, Colorado, Virginia, and Connecticut visitors automatically — no extra client code.
CIPA session-replay protection
Blocks Hotjar, Clarity, Lucky Orange, and PostHog session replay before consent — removing the $5,000/visitor CIPA exposure for California traffic.
No hydration mismatch
Because consent state is managed outside the React/Astro tree, you avoid the SSR/CSR mismatches and UI flashes that DIY in-tree consent providers cause.
JAMstack Privacy Compliance Checklist (2026)
Frequently Asked Questions
One head script.
No provider, no race.
ConsentPixel — Privacy · Verified blocks the GA4, GTM, Meta Pixel, and session-replay scripts your Next.js, Gatsby, or Astro site injects — before the framework hydrates. All four GCM v2 parameters and GPC handled for you. Zero dependencies, no hydration mismatch.