SvelteKit

Initialize from the root layout with onMount. The callback runs in the browser and is skipped during server rendering.

Initialize Tracwell

src/routes/+layout.svelte

<script lang="ts">
  import { onMount } from "svelte";
  import { createTracwell } from "tracwell";

  onMount(() => {
    createTracwell({
      collectionMode: "product",
      projectKey: "tw_live_...",
    });
  });
</script>

Keep the root layout mounted across navigation. SvelteKit page changes are then captured from browser history.

Track an event

Keep the initialized client available to the components or services that own successful product outcomes, then call track() after the outcome completes.

TypeScript

const eventId = analytics.track("signup_completed", {
  plan: "starter",
  source: "pricing",
});

if (!eventId) {
  // Collection is blocked or the event did not pass validation.
}

Continue with the custom events guide for naming, property limits, and verification.