## Astro's Simplicity, Extended to Compliance Astro is refreshingly simple. Write HTML. Add some scripts. Ship fast sites. Cookie consent tools often fight this simplicity. They want npm packages, build plugins, and configuration files. They add complexity where there should be none. We follow Astro's philosophy: add a script tag, you're done. ## The 30-Second Setup ```astro --- // src/layouts/Layout.astro --- ``` Every page using this layout now has: - GDPR-compliant cookie banner - Google Consent Mode v2 (all four signals) - Script blocking until consent - Third-party pixel support No npm install. No configuration file. No build step. ## Environment Variables Use Astro's environment variables for different domains: ```astro --- // src/layouts/Layout.astro const domainId = import.meta.env.PUBLIC_GETCOOKIES_DOMAIN_ID --- {domainId && ( )} ``` ```env # .env PUBLIC_GETCOOKIES_DOMAIN_ID=your-domain-id ``` ## Island Architecture: Perfect Compatibility Astro's island architecture works seamlessly with GetCookies. The consent script runs globally. Your interactive islands check consent when they need to. ### React Island ```tsx // src/components/Analytics.tsx import { useEffect, useState } from 'react' export default function Analytics() { const [hasConsent, setHasConsent] = useState(false) useEffect(() => { const checkConsent = () => { setHasConsent(window.GetCookies?.hasConsent('analytics') ?? false) } checkConsent() window.addEventListener('getcookies:consent', checkConsent) return () => window.removeEventListener('getcookies:consent', checkConsent) }, []) useEffect(() => { if (hasConsent) { // Initialize analytics console.log('Analytics enabled') } }, [hasConsent]) return null } ``` ```astro --- import Layout from '../layouts/Layout.astro' import Analytics from '../components/Analytics' ---

Welcome

``` ### Vue Island ```vue ``` ### Svelte Island ```svelte

Analytics: {hasAnalytics ? 'On' : 'Off'}

Cookie Settings

``` ## Conditional Script Loading ### Method 1: Data Attributes Let GetCookies manage script activation: ```astro --- // src/layouts/Layout.astro --- ``` The `type="text/plain"` prevents execution. GetCookies activates scripts after consent. ### Method 2: Inline Script Load scripts dynamically on consent: ```astro ``` ## Static Sites: Perfect Fit Astro often generates static sites. GetCookies is ideal for this: 1. **No server required** - GetCookies runs entirely client-side 2. **CDN-friendly** - Works on any static host 3. **No build-time data** - Consent state is runtime-only ### Hosts That Work - Netlify - Vercel - Cloudflare Pages - GitHub Pages - AWS S3 + CloudFront - Any static file server ## Common Patterns ### Footer Cookie Link ```astro --- // src/components/Footer.astro --- ``` ### Consent-Aware Component ```astro --- // src/components/PersonalizedSection.astro ---

Sign in for personalized recommendations

``` ## TypeScript Support Add types to your env.d.ts: ```typescript // src/env.d.ts /// interface Window { GetCookies?: { hasConsent: (category: 'analytics' | 'marketing' | 'preferences') => boolean showPreferences: () => void acceptAll: () => void rejectAll: () => void } } ``` ## View Transitions With Astro's View Transitions, GetCookies persists across navigations: ```astro --- // src/layouts/Layout.astro import { ViewTransitions } from 'astro:transitions' --- ``` Users won't see the banner again after choosing. State persists across page transitions. ## Content Collections: Consent-Aware Blog For blogs with consent-dependent features: ```astro --- // src/pages/blog/[slug].astro import { getCollection } from 'astro:content' import Layout from '../../layouts/Layout.astro' export async function getStaticPaths() { const posts = await getCollection('blog') return posts.map(post => ({ params: { slug: post.slug }, props: { post } })) } const { post } = Astro.props const { Content } = await post.render() ---

Enable cookies to view comments

``` ## Performance Impact | Metric | Impact | |--------|--------| | Bundle size | +1KB (loader only) | | LCP | No impact | | FID | No impact | | CLS | No impact | Your Lighthouse 100s stay at 100. ## Deployment ### Netlify ```bash npm run build netlify deploy --prod ``` ### Vercel ```bash vercel --prod ``` ### Cloudflare Pages ```bash npm run build npx wrangler pages deploy dist ``` ## What You Don't Have to Do - Install any npm package - Create any configuration file - Set up any build plugin - Configure GTM triggers - Read Consent Mode documentation - Debug SSR issues (there's no SSR to debug) One script tag. Full compliance. The Astro way. --- **Ready to add cookie consent to your Astro site?** [Get your domain ID in 60 seconds](https://getcookies.co)