Open Analytics
Svelte 4 / 5 & SvelteKit 1 / 2

Open-source web analytics for Svelte and SvelteKit

Minimalist, privacy-friendly telemetry built for high-performance Svelte applications. Integrates directly with SvelteKit client-side routing, Runes, and automated Core Web Vitals.

Launch DashboardUniversal Integration
SvelteKit Client-Side Routing SupportSvelte 5 Runes & Signals CompatibleSingle-Page & Static PrerenderingAutomated Core Web Vitals TelemetryZero-Cookie GDPR & CCPA ComplianceFeatherweight <3.2KB Performance Footprint
Quick Installation
Insert script tag in src/app.html or root layout

Complete Svelte & SvelteKit Integration Guide

Follow these steps to track pageviews, custom events, Core Web Vitals, and errors.

1Inject Script into app.html

Add the lightweight telemetry tag directly to the `<head>` of `src/app.html`. The deferred execution ensures no blocking of initial hydration.

src/app.html
<!-- src/app.html -->
<script
  defer
  src="https://api.openanalytics.org.in/open.js"
  data-project-id="prj_your_project_id"
></script>

2Track Client-Side Page Transitions in SvelteKit

Use SvelteKit's `afterNavigate` lifecycle hook in your root `+layout.svelte` to ensure route transitions are captured accurately during client-side navigation.

src/routes/+layout.svelte
<script lang="ts">
  import { afterNavigate } from '$app/navigation';

  afterNavigate((navigation) => {
    if (navigation.to && typeof window !== 'undefined' && (window as any).OpenAnalytics) {
      (window as any).OpenAnalytics.page(navigation.to.url.pathname);
    }
  });
</script>

<slot />

3Track Custom Events in Components

Emit conversion events from any Svelte component or interactive UI element safely.

src/lib/components/SubscribeModal.svelte
<script lang="ts">
  function handleSubscribe(tier: string) {
    if (typeof window !== 'undefined' && (window as any).OpenAnalytics) {
      (window as any).OpenAnalytics.track('plan_selected', {
        tier,
        source: 'checkout_modal'
      });
    }
  }
</script>

<button on:click={() => handleSubscribe('pro')}>
  Select Pro Plan
</button>
Custom Events & Conversions

Tracking Conversion Actions in Svelte 5

Using modern Svelte 5 snippets or runes to log user interactions cleanly.

export function trackUserAction(event: string, properties?: Record<string, any>) {
  if (typeof window !== 'undefined' && (window as any).OpenAnalytics) {
    (window as any).OpenAnalytics.track(event, properties);
  }
}
Core Web Vitals RUM

Automated Field Performance

Svelte is celebrated for its surgical DOM updates and lightweight runtime. Open Analytics preserves your application's speed advantage with an unbundled, asynchronous tracker that records INP, LCP, and CLS without touching Svelte reactivity.

Error Observability

Runtime Crash Triage

Monitors unhandled runtime exceptions and promise rejections across SvelteKit client routes, grouping crashes by exact route and device context.

Developer Questions

Frequently Asked Questions

Add Open Analytics to your Svelte & SvelteKit app today

Zero cookies, sub-3.2 KB payload, real-time Core Web Vitals RUM, and automated crash triage.

Launch Dashboard FreeExplore Documentation