ActionLab Analytics for Svelte / SvelteKit
Add privacy-first, AI-powered analytics to your Svelte / SvelteKit site in under 60 seconds. No cookies, no consent banners, no complex setup.
Setup at a Glance
Add ActionLab to Svelte / SvelteKit in 4 simple steps. Copy one script tag, paste it into your project, and start collecting privacy-friendly analytics immediately.
About Svelte / SvelteKit
Svelte is a compiler-based framework that generates optimized vanilla JavaScript at build time, producing smaller bundles and faster runtime performance than virtual DOM frameworks. SvelteKit extends Svelte with routing, server-side rendering, and deployment adapters. Both Svelte and SvelteKit communities prioritize performance and minimalism. ActionLab sub-2KB tracking script and zero-dependency approach align perfectly with this philosophy, providing analytics without the bundle bloat that Svelte was designed to eliminate.
Why Add Analytics to Svelte / SvelteKit
Svelte developers choose the framework specifically because it produces minimal, optimized JavaScript output. Adding a heavy analytics SDK would undermine the core value proposition. ActionLab sub-2KB external script maintains Svelte performance promise while providing full analytics capabilities. The automatic SvelteKit navigation tracking means developers do not need to add afterNavigate callbacks or navigation stores for analytics — it just works. For the Svelte community that values doing more with less, ActionLab represents analytics that follows the same principle.
Installation Code
<!-- In your app.html or +layout.svelte -->
<svelte:head>
<script
src="https://cdn.actionlabanalytics.com/actionlab.js"
data-site="YOUR_SITE_ID"
defer
></script>
</svelte:head>Step-by-Step Setup
- 1
Open your src/app.html for global inclusion, or src/routes/+layout.svelte for component-based inclusion using <svelte:head>.
- 2
Add the ActionLab script tag. In app.html, place it in the <head>. In +layout.svelte, wrap it in a <svelte:head> block.
- 3
Replace YOUR_SITE_ID with your actual site ID from the ActionLab dashboard.
- 4
SvelteKit client-side navigation is tracked automatically via History API detection. No Svelte stores, actions, or navigation hooks needed.
Why Use ActionLab with Svelte / SvelteKit
- Works with both SvelteKit full-stack applications and standalone Svelte SPAs.
- Automatic client-side navigation tracking for SvelteKit page transitions without any Svelte-specific integration code.
- Minimal footprint matches Svelte philosophy of shipping less JavaScript — the sub-2KB script is smaller than most Svelte components.
- No Svelte stores, actions, or lifecycle functions needed — the analytics are completely decoupled from your Svelte component architecture.
Frequently Asked Questions
Does ActionLab work with SvelteKit?
Yes. Add the script to your root layout (+layout.svelte using svelte:head) or app.html. SvelteKit client-side navigation is detected and tracked automatically via History API events. Both SSR and static SvelteKit sites are supported. No SvelteKit hooks, handle functions, or server-side configuration needed.
Does ActionLab affect Svelte bundle size?
No. ActionLab is loaded as an external script from the CDN and is not processed by the Svelte compiler or included in your application bundle. Your Svelte bundle size remains exactly the same with or without ActionLab. This is important for Svelte projects where bundle size is a key performance metric.
Does ActionLab track SvelteKit form actions?
ActionLab tracks page-level analytics. SvelteKit form actions that result in page navigation are tracked as pageviews. For form actions that do not navigate (progressive enhancement), you can fire custom events to track submissions. The combination of automatic page tracking and custom events covers both navigation-based and in-place form interactions.
Can I use ActionLab with Svelte 5 runes?
Yes. ActionLab operates at the browser level, completely independent of Svelte reactivity system. Whether you use Svelte 4 stores, Svelte 5 runes, or any other Svelte reactivity pattern, ActionLab tracking is unaffected because it does not interact with the Svelte runtime at all.
Which placement is better: app.html or +layout.svelte?
Both work equally well. app.html is the simplest approach and ensures the script loads on every page regardless of layout structure. +layout.svelte with svelte:head gives you more control if you need conditional loading or environment-based configuration. For most projects, app.html is the recommended approach for its simplicity.