Skip to main content

Getting Started

1. Create an analytics instance​

// src/lib/analytics/analytics.ts
import Analytics from 'analytics'
import { posthogPlugin } from '@repo/analytics'
import googleAnalytics from '@analytics/google-analytics'

export const analytics = Analytics({
  app: 'my-app',
  plugins: [
    googleAnalytics({
      measurementIds: ['G-XXXXXXXX'],
      enabled: false, // controlled by CookieWall
    }),
    posthogPlugin({
      apiKey: 'phc_...',
      initSettings: {
        api_host: 'https://eu.i.posthog.com',
        person_profiles: 'identified_only',
      },
    }),
  ],
})

2. Add CookieWall and page tracking to your layout​

<!-- +layout.svelte -->
<script lang="ts">
  import { CookieWall, trackPageView } from '@repo/analytics'
  import { analytics } from '$lib/analytics/analytics'
  import { onMount } from 'svelte'

  onMount(() => {
    trackPageView(analytics)
  })
</script>

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

{@render children()}

trackPageView subscribes to SvelteKit's page store and calls analytics.page() on every navigation.

CookieWall shows a consent dialog on first visit and persists preferences to local storage. Plugins listed in plugins are enabled/disabled based on user consent.

3. Track events with directives​

// src/lib/analytics/directives.ts
import { analytics } from './analytics'
import { createTrackClickDirective } from '@repo/analytics'

export const trackClick = createTrackClickDirective(analytics, 'clicked')
<script lang="ts">
  import { trackClick } from '$lib/analytics/directives'
</script>

<button use:trackClick={{ type: 'signup' }}>Sign Up</button>

See Directives and Plugins for more.