@productbet/tracker-svelte

Svelte / SvelteKit integration for ProductBet behavioral analytics. Provides createProductBet and helpers for session recording, event tracking, and user identification.

Install

npm install @productbet/tracker-svelte

Quick start

Call createProductBet in your root layout:

<!-- src/routes/+layout.svelte -->
<script>
  import { createProductBet } from "@productbet/tracker-svelte"

  createProductBet({ apiKey: "pb_live_xxxx" })
</script>

<slot />

Svelte 5 / SvelteKit with snippets:

<script>
  import { createProductBet } from "@productbet/tracker-svelte"

  let { children } = $props()
  createProductBet({ apiKey: "pb_live_xxxx" })
</script>

{@render children()}

That's it. The SDK automatically tracks clicks, form interactions, scroll depth, client-side navigation, console errors, and network failures.

Helpers

identify

Identify the current user once authenticated.

<script>
  import { identify } from "@productbet/tracker-svelte"

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

track

Track custom events.

<script>
  import { track } from "@productbet/tracker-svelte"
</script>

<button onclick={() => track("export_clicked", { format: "csv" })}>
  Export
</button>

trackPageView

Manually track page views when you need explicit SPA events.

<script>
  import { trackPageView } from "@productbet/tracker-svelte"
  import { page } from "$app/stores"

  $: trackPageView($page.url.pathname)
</script>

getTracker

Access the underlying tracker instance.

<script>
  import { getTracker } from "@productbet/tracker-svelte"

  const tracker = getTracker()
  // tracker?.getSessionId()
</script>

Configuration

Pass any option to createProductBet:

<script>
  import { createProductBet } from "@productbet/tracker-svelte"

  createProductBet({
    apiKey: "pb_live_xxxx",
    enableSessionRecording: true,
    enableAutoTracking: true,
    enableConsoleTracking: true,
    enableNetworkTracking: true,
    debug: false,
    redaction: { mode: "privacy-first", unredactFields: ["search"] },
  })
</script>

See @productbet/tracker-core for the full list of options.

License

MIT