SvelteKit

Installation

npm install --save @outlit/browser

pnpm add @outlit/browser

yarn add @outlit/browser

bun add @outlit/browser

Quick start

Initialize Outlit in your root layout:

// src/routes/+layout.ts
import outlit from '@outlit/browser'
import { browser } from '$app/environment'
import { PUBLIC_OUTLIT_KEY } from '$env/static/public'

if (browser) {
  outlit.init({
    publicKey: PUBLIC_OUTLIT_KEY,
    trackPageviews: true,
  })
}

export const prerender = true
export const ssr = false

Add your public key to .env:

PUBLIC_OUTLIT_KEY=pk_your_public_key_here

Alternative: layout component

Initialize in the layout component:

<!-- src/routes/+layout.svelte -->
<script>
  import { browser } from '$app/environment'
  import { PUBLIC_OUTLIT_KEY } from '$env/static/public'
  import outlit from '@outlit/browser'
  import { onMount } from 'svelte'

  onMount(() => {
    if (browser) {
      outlit.init({
        publicKey: PUBLIC_OUTLIT_KEY,
        trackPageviews: true,
      })
    }
  })
</script>

<slot />

Tracking events

Track events in your components:

<!-- src/routes/pricing/+page.svelte -->
<script>
  import outlit from '@outlit/browser'

  function handleCheckout() {
    outlit.track('checkout_started', {
      plan: 'pro',
      amount: 99
    })
  }
</script>

<button on:click={handleCheckout}>
  Start Free Trial
</button>

Identifying users

Identify users after authentication:

<!-- src/routes/login/+page.svelte -->
<script>
  import { goto } from '$app/navigation'
  import outlit from '@outlit/browser'

  let email = ''
  let password = ''

  async function handleLogin() {
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    })

    const user = await response.json()

    outlit.identify({
      email: user.email,
      userId: user.id,
      traits: {
        name: user.name,
        plan: user.plan
      }
    })

    goto('/dashboard')
  }
</script>

<form on:submit|preventDefault={handleLogin}>
  <input bind:value={email} type="email" placeholder="Email" />
  <input bind:value={password} type="password" placeholder="Password" />
  <button type="submit">Login</button>
</form>

Track navigation with SvelteKit’s stores:

<!-- src/routes/+layout.svelte -->
<script>
  import { afterNavigate } from '$app/navigation'
  import { browser } from '$app/environment'
  import outlit from '@outlit/browser'
  import { onMount } from 'svelte'

  onMount(() => {
    if (browser) {
      outlit.init({
        publicKey: PUBLIC_OUTLIT_KEY,
        trackPageviews: false, // Manual tracking
      })
    }
  })

  afterNavigate(({ to }) => {
    if (browser && to) {
      outlit.track('pageview', {
        path: to.url.pathname,
        params: to.params
      })
    }
  })
</script>

<slot />

Load function integration

Track events from load functions:

// src/routes/product/[id]/+page.ts
import type { PageLoad } from './$types'

export const load: PageLoad = async ({ params, fetch }) => {
  const product = await fetch(`/api/products/${params.id}`).then(r => r.json())

  // Track on server
  await fetch('/api/track', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      eventName: 'product_viewed',
      userId: 'usr_123',
      properties: { productId: params.id }
    })
  })

  return { product }
}

Server-side tracking

Track events from API routes:

// src/routes/api/track/+server.ts
import { json } from '@sveltejs/kit'
import type { RequestHandler } from './$types'
import { Outlit } from '@outlit/node'
import { OUTLIT_KEY } from '$env/static/private'

const outlit = new Outlit({
  publicKey: OUTLIT_KEY
})

export const POST: RequestHandler = async ({ request }) => {
  const { eventName, properties, userId, email, customerId } = await request.json()

  outlit.track({
    eventName,
    userId,
    email,
    customerId,
    properties
  })

  await outlit.flush()

  return json({ success: true })
}

For server-side tracking, see the Node.js integration guide.

Auth integration

With Lucia

<!-- src/routes/+layout.svelte -->
<script>
  import { browser } from '$app/environment'
  import { page } from '$app/stores'
  import outlit from '@outlit/browser'
  import { onMount } from 'svelte'

  onMount(() => {
    if (browser) {
      outlit.init({
        publicKey: PUBLIC_OUTLIT_KEY,
        trackPageviews: true,
      })
    }
  })

  $: if (browser && $page.data.user) {
    outlit.setUser({
      email: $page.data.user.email,
      userId: $page.data.user.id,
      traits: {
        name: $page.data.user.name
      }
    })
  } else if (browser && !$page.data.user) {
    outlit.clearUser()
  }
</script>

<slot />

Activation event

Track your value milestone as an ordinary event once it succeeds:

<script>
  import outlit from '@outlit/browser'

  // Call this after the project creation request succeeds.
  function onProjectCreated() {
    outlit.track('first_project_created', { flow: 'onboarding' })
  }
</script>

Choose this event as your activation event in Outlit if it represents the value milestone. The first matching event records activation once for each eligible resolved person and company, independently. Billing status comes from verified integrations such as Stripe. See Customer journey. The default autoTrack: "auto" mode already keeps tracking off for visitors in regions that require opt-in consent (EEA, UK, Switzerland, or unknown); the example below uses autoTrack: false to wait for an explicit consent signal unless a previous opt-in is stored. Handle user consent:

<!-- src/lib/components/CookieBanner.svelte -->
<script>
  import { browser } from '$app/environment'
  import outlit from '@outlit/browser'
  import { onMount } from 'svelte'

  let showBanner = false

  onMount(() => {
    if (browser) {
      const hasConsent = localStorage.getItem('tracking-consent')
      showBanner = hasConsent !== 'true'
    }
  })

  function acceptTracking() {
    localStorage.setItem('tracking-consent', 'true')
    outlit.enableTracking()
    showBanner = false
  }
</script>

{#if showBanner}
  <div class="cookie-banner">
    <p>We use cookies to improve your experience.</p>
    <button on:click={acceptTracking}>Accept</button>
  </div>
{/if}

Initialize without auto-tracking:

// src/routes/+layout.ts
import outlit from '@outlit/browser'
import { browser } from '$app/environment'
import { PUBLIC_OUTLIT_KEY } from '$env/static/public'

if (browser) {
  outlit.init({
    publicKey: PUBLIC_OUTLIT_KEY,
    autoTrack: false, // Wait for consent
  })
}

Stores integration

Create a store for Outlit:

// src/lib/stores/outlit.ts
import { writable } from 'svelte/store'
import outlit from '@outlit/browser'

function createOutlitStore() {
  const { subscribe } = writable(outlit)

  return {
    subscribe,
    track: (eventName: string, properties?: Record<string, any>) => {
      outlit.track(eventName, properties)
    },
    identify: (options: { email?: string; userId?: string; traits?: Record<string, any> }) => {
      outlit.identify(options)
    },
    setUser: (identity: { email?: string; userId?: string; traits?: Record<string, any> }) => {
      outlit.setUser(identity)
    },
    clearUser: () => {
      outlit.clearUser()
    },
    user: outlit.user,
  }
}

export const outlitStore = createOutlitStore()

Use in components:

<script>
  import { outlitStore } from '$lib/stores/outlit'

  function handleClick() {
    outlitStore.track('button_clicked', { button: 'cta' })
  }
</script>

<button on:click={handleClick}>
  Click Me
</button>

Environment variables

Configure environment variables:

# .env

# Public key (used in browser)
PUBLIC_OUTLIT_KEY=pk_your_public_key_here

# Server key (used in server API routes)
OUTLIT_KEY=pk_your_public_key_here

Keep server environment variables out of client-side code. Only use OUTLIT_KEY in server-side API routes.

TypeScript support

Full TypeScript support is included:

import outlit, { type OutlitOptions } from '@outlit/browser'

const options: OutlitOptions = {
  publicKey: PUBLIC_OUTLIT_KEY,
  trackPageviews: true,
  flushInterval: 5000
}

outlit.init(options)

Next steps

Server-side tracking

Track events from your backend

Identity resolution

Learn how visits and events link to people

npm package

Full API reference

React integration

Use Outlit with React

Agents

CLI

Concepts

Outlit SDKs

Examples

Installation

Quick start

Alternative: layout component

Tracking events

Identifying users

Navigation tracking

Load function integration

Server-side tracking

Auth integration

With Lucia

Activation event

Stores integration

Environment variables

TypeScript support

Next steps

Server-side tracking

Identity resolution

npm package

React integration

​Installation

​Quick start

​Alternative: layout component

​Tracking events

​Identifying users

​Navigation tracking

​Load function integration

​Server-side tracking

​Auth integration

​With Lucia

​Activation event

​Consent management

​Stores integration

​Environment variables

​TypeScript support

​Next steps

Server-side tracking

Identity resolution

npm package

React integration

Installation

Quick start

Alternative: layout component

Tracking events

Identifying users

Navigation tracking

Load function integration

Server-side tracking

Auth integration

With Lucia

Activation event

Consent management

Stores integration

Environment variables

TypeScript support

Next steps