Svelte
Add Logspot analytics to a Svelte or SvelteKit app with automatic pageviews and custom events.
This guide covers Svelte and SvelteKit. The fastest setup is the script tag; for typed, programmatic tracking use the @logspot/web SDK.
Option A — Script Tag (SvelteKit)
Add the script to your root template so it loads on every page. It captures pageviews automatically, including client-side route changes.
<!-- src/app.html -->
<head>
%sveltekit.head%
<script
src="https://cdn.logspot.io/lg.js"
data-logspot-pk="YOUR_PUBLIC_KEY"
async
></script>
</head>Find your public key in Project settings.
Option B — SDK (@logspot/web)
npm install @logspot/webInitialize once in the root layout, guarding for SSR with browser:
// src/routes/+layout.ts
import { browser } from '$app/environment';
import Logspot from '@logspot/web';
if (browser) {
Logspot.init({
publicKey: 'YOUR_PUBLIC_KEY',
enableAutoPageviews: true,
});
}
enableAutoPageviewstracks history navigations for you. For a plain Svelte (non-Kit) app, callLogspot.init(...)in your entry file after the DOM is available.
Track Events
<script lang="ts">
import Logspot from '@logspot/web';
function subscribe() {
Logspot.track({ event: 'UserSubscribed', metadata: { plan: 'pro' } });
}
</script>
<button on:click={subscribe}>Subscribe</button>
<!-- or auto-capture with the class convention: -->
<button class="lgspt-sign-up">Sign up</button>Identify Users
Logspot.identify('john@doe.com', { plan: 'pro' });Call Logspot.reset() on logout to stop linking events to that user.
Consent (Optional)
Logspot.setConsent({ analytics: true });See How Tracking & Identity Works for the consent model.
Verify It's Working
Run your dev server, navigate around, and watch events appear in the Logspot dashboard within seconds.