Svelte / SvelteKit

Svelte 5 / SvelteKit + @millimetric/track.

Install

npm i @millimetric/track

SvelteKit — root layout

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { onMount } from "svelte";
  import { init } from "@millimetric/track";
  import { PUBLIC_AOA_KEY, PUBLIC_AOA_HOST } from "$env/static/public";

  let { children } = $props();

  onMount(() => {
    init({
      key: PUBLIC_AOA_KEY,
      host: PUBLIC_AOA_HOST ?? "https://api.millimetric.ai"
    });
  });
</script>

{@render children()}

The SDK patches history.pushState, so SvelteKit's client-side navigations auto-fire $pageview.

# .env
PUBLIC_AOA_KEY=pk_live_...
PUBLIC_AOA_HOST=https://api.millimetric.ai

Identify on login

<!-- src/lib/IdentifyOnAuth.svelte -->
<script lang="ts">
  import { identify } from "@millimetric/track";
  import { user } from "$lib/stores/auth";   // your auth store
  import { afterUpdate } from "svelte";

  $effect(() => {
    if ($user) identify($user.id, { email: $user.email, plan: $user.plan });
  });
</script>

Mount once in +layout.svelte next to your other auth-aware components.

(For Svelte 4, replace the $effect rune with a reactive statement: $: if ($user) identify($user.id);)

Track on intent

<script lang="ts">
  import { track } from "@millimetric/track";

  function onClickPricing(plan: "free" | "pro") {
    track("clicked_pricing", { plan });
  }
</script>

<button onclick={() => onClickPricing('pro')}>Choose Pro</button>

Server-side events — +server.ts

Use @millimetric/track-node with an sk_* key. The variable goes in the private env namespace so it never ships to the client.

// src/lib/server/mm.ts
import { init, track, flush } from "@millimetric/track-node";
import { AOA_SK, AOA_HOST } from "$env/static/private";

init({ key: AOA_SK, host: AOA_HOST, flushAt: 1 });

export { track, flush };

// src/routes/api/signup/+server.ts
import { json } from "@sveltejs/kit";
import { track, flush } from "$lib/server/mm";

export async function POST({ request }) {
  const { anonymous_id, user_id, plan } = await request.json();

  track({
    event: "signup",
    anonymous_id,
    user_id,
    properties: { plan }
  });

  await flush();
  return json({ ok: true });
}

Form actions

Same idea — call track() inside the default action, flush() before returning:

// src/routes/signup/+page.server.ts
import { fail } from "@sveltejs/kit";
import { track, flush } from "$lib/server/mm";

export const actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = String(data.get("email"));
    const aid = cookies.get("aid");

    // ... your signup logic ...

    track({
      event: "signup",
      anonymous_id: aid,
      user_id: createdUser.id,
      properties: { plan: "free" }
    });
    await flush();

    return { ok: true };
  }
};

SSR safety

Don't import @millimetric/track in code that runs server-side — it touches localStorage and navigator. SvelteKit's +page.server.ts and +layout.server.ts files run on the server only; reach for @millimetric/track-node there instead.

onMount and $effect only fire on the client, so calling browser-SDK functions inside them is always safe.

Plain Svelte (no SvelteKit)

Same flow, simpler init:

<!-- App.svelte -->
<script lang="ts">
  import { onMount } from "svelte";
  import { init, track } from "@millimetric/track";

  onMount(() => init({ key: import.meta.env.VITE_AOA_KEY }));
</script>