Why Astro Sites Still Need Cookie Consent
Astro generates static HTML by default and ships zero client-side JavaScript unless you explicitly opt in. That architectural choice earns strong performance scores, yet it does not remove the obligation to obtain valid cookie consent before setting non-essential cookies.
The moment you add Google Analytics, a Meta Pixel, a live chat widget, or any third-party embed, your Astro site starts dropping cookies such as _ga, _fbp, and _hjSessionUser into visitor browsers. Under Article 5(3) of the ePrivacy Directive and the GDPR's consent requirements, each of those cookies requires prior, informed, and freely given consent from the visitor - regardless of which framework generated the page.
Static site generators sometimes create a false sense of security. A site can score 100 on Lighthouse and still violate EU cookie law.
How Astro Handles Scripts and Why It Matters for Cookies
Astro processes <script> tags in .astro files by bundling and optimising them through Vite. The output is a hashed, deferred JavaScript file loaded once across the site. This is efficient, but it means analytics snippets placed inside a standard <script> block will execute automatically on every page load - before a visitor has a chance to give or refuse consent.
Two directives change that behaviour. The is:inline directive tells Astro to leave a script tag untouched in the final HTML, skipping the Vite pipeline entirely. The define:vars directive passes server-side variables into a script and implicitly applies is:inline. Both are relevant when you need precise control over when and whether a tracking script runs.
Astro's islands architecture hydrates interactive components independently using client directives such as client:load, client:idle, and client:visible. A cookie banner component, for example, can be hydrated with client:load so it appears immediately, while a non-essential analytics component could be loaded only after consent is confirmed.
Cookies You Will Typically Find on an Astro Site
A freshly built Astro project with no integrations sets no cookies at all. The cookies appear once you add third-party services. Below is a summary of common cookies grouped by category.
| Category | Example Cookies | Source | Consent Required |
|---|---|---|---|
| Strictly necessary | PHPSESSID, __cf_bm | Server session, Cloudflare bot management | No |
| Analytics | _ga, _ga_*, _hjSession | Google Analytics 4, Hotjar | Yes |
| Marketing | _fbp, _gcl_au, li_fat_id | Meta Pixel, Google Ads, LinkedIn | Yes |
| Functional | pll_language, theme preference | Language switcher, UI state | Depends on jurisdiction |
Running a cookie scan on your live Astro site is the fastest way to get a definitive list. Scanners detect cookies set by third-party scripts, iframes, and embedded content that you might not realise are present.
Installing a Cookie Banner on an Astro Site
The recommended approach is to place the banner script in your site's <head> element, inside the base layout file that wraps every page. In most Astro projects, this is src/layouts/Layout.astro or src/layouts/BaseLayout.astro.
Add the script tag with the is:inline directive so Astro does not bundle or defer it. The banner must load before any non-essential scripts to block them until consent is granted. Placing it at the top of <head> achieves that.
For a detailed walkthrough with code examples, see the Astro installation guide in the Help Centre.
Handling View Transitions
Astro's View Transitions API swaps page content without a full reload. If your site uses <ViewTransitions />, the banner script in <head> persists across navigations automatically - no extra configuration needed. Scripts that depend on page-specific DOM elements should listen for the astro:page-load event rather than DOMContentLoaded.
Blocking Third-Party Scripts Until Consent
A cookie banner alone is not enough. You must prevent non-essential cookies from being set before the visitor makes a choice. There are two practical strategies for Astro sites.
Strategy 1: Script Type Swapping
Change the type attribute of analytics and marketing scripts from text/javascript to text/plain. The browser ignores scripts with an unrecognised MIME type. When the visitor grants consent, the consent management platform swaps the type back to text/javascript and the script executes.
This technique works well with is:inline scripts. Because Astro does not process inline scripts through Vite, the type="text/plain" attribute remains intact in the output HTML.
Strategy 2: Auto-Blocking with a CMP
Some consent management platforms offer automatic script blocking. The CMP's script loads first and intercepts all subsequent script requests, holding back anything classified as analytics or marketing until consent is recorded. This removes the need to manually tag every third-party snippet.
Google Consent Mode and Astro
If you use Google Analytics 4 or Google Ads, Google Consent Mode v2 is worth configuring. Consent Mode sends consent signals to Google's tags so they adjust their behaviour - collecting no identifying data when consent is denied, but still providing modelled conversion data.
In an Astro project, the Consent Mode default command should appear before the Google tag snippet. Both should use is:inline to prevent Astro from reordering or bundling them. The consent management platform then updates the consent state when the visitor interacts with the banner.
A working setup pairs the CMP script, the Consent Mode defaults, and the gtag.js snippet - all as inline scripts in the <head> of your base layout. The CMP's Consent Mode integration handles the signalling automatically.
Common Mistakes When Adding Consent to Astro
Placing the banner script inside a bundled <script> tag (without is:inline) causes Astro to defer it, which means tracking scripts may fire before the banner loads. Always use is:inline for consent-critical scripts.
Forgetting to block Google Analytics during the default consent state is another frequent error. Loading gtag.js sets cookies immediately unless Consent Mode defaults are configured to deny analytics and ad storage.
Neglecting iframe embeds is a third pitfall. YouTube videos, Google Maps, and social media embeds all set cookies through iframes. These need placeholder elements that load the real iframe only after consent.
Relying on client:visible to delay analytics components does not constitute consent management. Visibility-based hydration controls performance, not privacy. A visitor scrolling to an analytics component has not consented to tracking merely by seeing it.
Which Regulations Apply to Your Astro Site
The legal requirements depend on where your visitors are located, not where your server is hosted.
| Regulation | Region | Consent Model | Key Requirement |
|---|---|---|---|
| GDPR | EU/EEA | Opt-in | Prior consent before non-essential cookies |
| UK GDPR / PECR | United Kingdom | Opt-in | Clear, affirmative action required |
| CCPA/CPRA | California | Opt-out | "Do Not Sell or Share" link required |
| LGPD | Brazil | Opt-in | Consent must be free, informed, unambiguous |
| PIPEDA | Canada | Implied/express | Meaningful consent with clear purposes |
| POPIA | South Africa | Opt-in | Consent must be voluntary and specific |
Geo-detection features offered by consent management platforms apply the correct consent model based on the visitor's location. A visitor from Germany sees an opt-in banner, while a visitor from California sees a "Do Not Sell" toggle. Configuring region rules avoids showing unnecessary prompts to visitors in jurisdictions with no cookie law.
Checklist: Cookie Compliance for Astro Projects
Use this as a quick reference when setting up or auditing your Astro site.
Run a cookie scan to identify every cookie your site sets
Place the CMP script at the top of
<head>in your base layout withis:inlineBlock all non-essential scripts until consent is granted (type-swap or auto-block)
Configure Consent Mode v2 defaults if using Google tags
Add iframe placeholders for embedded content (YouTube, maps, social)
Set up geo-detection to apply the right consent model per region
Generate a cookie policy and link it from the banner
Test with Chrome DevTools to confirm no cookies appear before consent
Verify the banner works with View Transitions enabled
Frequently Asked Questions
Does a static Astro site need cookie consent?
Yes. If your Astro site loads any third-party script that sets non-essential cookies - such as Google Analytics, a Meta Pixel, or Hotjar - you are required to obtain consent under the GDPR, ePrivacy Directive, and similar regulations worldwide.
How do I stop Google Analytics cookies loading before consent in Astro?
Use the is:inline directive on your analytics script and set type="text/plain" so the browser does not execute it. Alternatively, configure Google Consent Mode v2 defaults to deny analytics storage, or use a CMP with automatic script blocking.
Does Astro's islands architecture affect cookie compliance?
Islands architecture controls when components hydrate on the client, which is a performance feature. It does not prevent cookies from being set by third-party scripts loaded in <head> or through iframes. You still need a consent mechanism independent of hydration.
Should I use is:inline for the cookie banner script in Astro?
Yes. The is:inline directive ensures Astro does not bundle or defer the script. The banner must execute before any non-essential scripts to block them, so it needs to load synchronously in the <head>.
Can I use client:load for a cookie consent component in Astro?
You can hydrate a consent UI component with client:load, but the script-blocking logic must still run before any tracking code. A CMP snippet in <head> handles blocking, while a hydrated component can manage the visual banner and user interaction.
Do I need separate cookie banners for EU and US visitors on my Astro site?
Not separate banners, but different consent models. The GDPR requires opt-in consent, while the CCPA requires an opt-out mechanism. A CMP with geo-detection applies the correct model per visitor location automatically.
Take Control of Your Cookie Compliance
If you are not sure which cookies your Astro site sets, start with a free scan. Kukie.io detects, categorises, and helps you manage every cookie - so your visitors get a clear choice, and you stay on the right side of the law.
