CookieWall

GDPR consent dialog that controls which analytics plugins are active.

Props

Prop	Type	Default	Description
analytics	AnalyticsInstance	required	Analytics instance to control
plugins	string[]	required	Plugin names to enable/disable based on consent
handled	boolean (bindable)	true	Whether consent has been handled

Usage

<script lang="ts">
  import { CookieWall } from '@repo/analytics'
  import { analytics } from '$lib/analytics/analytics'
</script>

<CookieWall {analytics} plugins={['google-analytics', 'posthog']} />

How it works

1. On mount, checks local storage for saved cookie preferences
2. If no preferences found, opens a dialog with three categories:
   • Functional -- always enabled, cannot be toggled off
   • Analytics -- enabled by default, toggleable
   • Marketing -- disabled by default, toggleable
3. When analytics consent is granted, calls analytics.plugins.enable(plugins) for all listed plugins
4. When declined, calls analytics.plugins.disable(plugins)
5. Preferences are persisted via @analytics/storage-utils

Important

Plugins passed to your Analytics() instance should start with enabled: false so they remain inactive until the user consents:

googleAnalytics({
  measurementIds: ['G-XXXXXXXX'],
  enabled: false, // CookieWall enables this after consent
})