SvelteKit Cookie Consent: The Complete Guide

Date: March 20, 2026 Author: GetCookies Team Category: Technical Reading Time: 9 min

---

SvelteKit is rapidly becoming the framework of choice for performance-obsessed developers. But its unique architecture—blending server-side rendering (SSR) and client-side hydration—presents specific challenges for cookie consent.

You cannot just drop a script tag in app.html and hope for the best. You need to handle hydration mismatches, manage SSR cookies, and ensure Google Consent Mode signals fire before the first pixel renders.

This guide covers the GetCookies implementation for SvelteKit 2.0+.

1. Installation

The most efficient way to load GetCookies in SvelteKit is via the app.html file, ensuring it loads before your app hydrates.

<!-- src/app.html -->
<head>
  <script>
    // Define dataLayer and the gtag function.
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    
    // Default to 'denied'.
    gtag('consent', 'default', {
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'analytics_storage': 'denied',
      'wait_for_update': 500
    });
  </script>
  <!-- GetCookies Loader -->
  <script 
    src="https://js.getcookies.io/v1/loader.js" 
    data-domain-id="YOUR_DOMAIN_ID"
    async>
  </script>
</head>

2. Managing State in Svelte Stores

While GetCookies handles the UI and blocking automatically, you might want to access consent state within your Svelte components (e.g., to conditionally render a YouTube embed).

Create a store to track consent:

// src/lib/stores/consent.ts
import { writable } from 'svelte/store';

export const consentState = writable({
  analytics: false,
  marketing: false,
  functional: true
});

if (typeof window !== 'undefined') {
  window.addEventListener('getcookies:consent_updated', (e: any) => {
    consentState.set(e.detail);
  });
}

3. Server-Side Cookies (SSR)

If you are doing A/B testing or personalization on the server (in +page.server.ts), you need to know the user's consent status before you render HTML.

GetCookies sets a first-party cookie named gc_consent that you can read in your hooks.

// src/hooks.server.ts
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  const consentCookie = event.cookies.get('gc_consent');
  
  if (consentCookie) {
    const consent = JSON.parse(consentCookie);
    event.locals.consent = consent;
  }

  return await resolve(event);
};

4. Conditional Third-Party Scripts

Svelte's <svelte:head> is perfect for injecting scripts only when consent is granted.

<!-- +layout.svelte -->
<script>
  import { consentState } from '$lib/stores/consent';
</script>

{#if $consentState.marketing}
  <svelte:head>
    <script src="https://connect.facebook.net/en_US/fbevents.js"></script>
  </svelte:head>
{/if}

Conclusion

SvelteKit's "use the platform" philosophy works perfectly with GetCookies. By leveraging app.html for defaults and Svelte stores for reactive state, you get a compliant, high-performance setup that doesn't break hydration.