Svelte / SvelteKit
Integrate vTilt with SvelteKit — npm package or inline script, route navigations, server-side events from +server endpoints.
vTilt slots into SvelteKit through +layout.svelte (or app.html) for the browser side and +server.ts route handlers for server-side events. SvelteKit's browser flag from $app/environment keeps the SDK out of the SSR bundle.
#1. Add your environment variables
# .env
PUBLIC_VTILT_TOKEN=YOUR_PROJECT_TOKEN
PUBLIC_VTILT_HOST=https://www.vtilt.com
VTILT_TRACKER_TOKEN=YOUR_PROJECT_TOKEN#2. Install & initialise
Choose how you load the Browser SDK. npm initialises the SDK in the root layout; the inline script drops a stub in app.html with no package to install. Both expose the same window.vt global — the rest of this guide is identical either way.
Install the package:
npm install @v-tilt/browserInitialise in the root layout and emit pageviews on navigation:
<!-- src/routes/+layout.svelte -->
<script lang="ts">
import { onMount } from 'svelte'
import { browser } from '$app/environment'
import { afterNavigate } from '$app/navigation'
import { vt } from '@v-tilt/browser'
import { PUBLIC_VTILT_TOKEN, PUBLIC_VTILT_HOST } from '$env/static/public'
onMount(() => {
if (!browser) return
vt.init(PUBLIC_VTILT_TOKEN, {
api_host: PUBLIC_VTILT_HOST,
autocapture: true,
capture_pageview: false,
capture_pageleave: true,
})
})
afterNavigate(({ to, from }) => {
if (!to) return
vt.capture('$pageview', {
$current_url: window.location.href,
$pathname: to.url.pathname,
$referrer: from?.url.pathname,
})
})
</script>
<slot />#3. Identify users on every page load
Pull the current user from a +layout.server.ts load function, then identify on the client whenever the session changes.
// src/routes/+layout.server.ts
export const load = async ({ locals }) => ({
user: locals.user ?? null,
})<!-- src/routes/+layout.svelte (continued) -->
<script lang="ts">
import { browser } from '$app/environment'
import { vt } from '@v-tilt/browser'
import type { LayoutData } from './$types'
export let data: LayoutData
$: if (browser && data.user) {
vt.identify(data.user.id, { email: data.user.email })
}
</script>#4. Capture events from components
<script lang="ts">
import { vt } from '@v-tilt/browser'
function trackCta() {
vt.capture('cta_clicked', { location: 'hero' })
}
</script>
<button on:click={trackCta}>Get started</button>#5. Server-side events with +server.ts
For server-side events, install the Node SDK:
npm install @v-tilt/node// src/lib/server/vtilt.ts
import { VTiltNode } from '@v-tilt/node'
import { VTILT_TRACKER_TOKEN } from '$env/static/private'
import { PUBLIC_VTILT_HOST } from '$env/static/public'
export const vtilt = new VTiltNode(VTILT_TRACKER_TOKEN, {
host: PUBLIC_VTILT_HOST,
})// src/routes/api/checkout/+server.ts
import { json } from '@sveltejs/kit'
import { vtilt } from '$lib/server/vtilt'
export async function POST({ request }) {
const { userId, amount } = await request.json()
vtilt.capture({
distinctId: userId,
event: 'purchase_completed',
properties: { amount },
})
await vtilt.shutdown()
return json({ ok: true })
}#Next steps
- Identify & alias — anonymous → known user merge.
- Autocapture — what's captured automatically.
- Node SDK — server-side event shapes.