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.