# SvelteKit
> Add cookieless product analytics to your SvelteKit application
import { Steps, Step } from "@/components/docs";
import { Callout } from "@/components/docs";
import { CodeBlock } from "@/components/docs";
import { Card, Cards } from "@/components/docs";
This guide explains how to integrate Databuddy with your SvelteKit application for analytics tracking.
## How to Add Databuddy to Your SvelteKit App
The recommended method for SvelteKit is to add the Databuddy tracking script directly to your `src/app.html` file. This ensures the script is loaded early on all pages.
### Adding to `src/app.html`
Navigate to your [Databuddy dashboard](https://app.databuddy.cc) to get your tracking code snippet:
`}
/>
Replace `YOUR_CLIENT_ID` with your actual Client ID.
In a SvelteKit project, this file is typically located at `src/app.html`.
Open `src/app.html` and paste the Databuddy tracking snippet into the `` section, usually before `%sveltekit.head%` or just after it.
%sveltekit.head%
%sveltekit.body%
`}
/>
Ensure `YOUR_CLIENT_ID` is replaced with your actual Client ID.
Deploy your application and check your [Databuddy dashboard](https://app.databuddy.cc) for incoming data. You can also inspect your browser's network tab to confirm the script is loaded.
**SPA Page View Tracking**: Databuddy automatically tracks route changes in SvelteKit applications. If page views aren't tracked correctly after navigation (which is uncommon), you can manually trigger them using the `afterNavigate` lifecycle function:
{
if (typeof window !== 'undefined' && window.databuddy) {
window.databuddy.screenView({
path: window.location.pathname
});
}
});`}
/>
Test the default behavior first, as manual tracking is usually not needed.
## Custom Event Tracking
Track custom events from any Svelte component within your SvelteKit app:
function handleAction() {
if (typeof window !== 'undefined' && window.databuddy) {
window.databuddy.track('button_click', {
component: 'MySvelteKitComponent',
button_id: 'cta-button'
});
}
}
`}
/>
Always check `typeof window !== 'undefined'` before accessing `window.databuddy` as SvelteKit components can also run on the server during SSR.
## Tracking Route Changes
For more control over route tracking, use SvelteKit's navigation lifecycle:
import { afterNavigate } from '$app/navigation';
import { page } from '$app/state';
afterNavigate(() => {
if (typeof window !== 'undefined' && window.databuddy) {
window.databuddy.screenView({
path: page.url.pathname,
search: page.url.search
});
}
});
`}
/>
## Using Data Attributes
Enable automatic tracking with data attributes by adding this to your script tag:
`}
/>
Then add `data-track` attributes directly to elements in your Svelte components:
Get Started
View Pricing
`}
/>
## Configuration Options
Enable additional tracking features:
`}
/>
## Common Use Cases
### Form Submissions
Track form submissions in SvelteKit:
import { enhance } from '$app/forms';
const handleSubmit = ({ formElement }) => {
if (typeof window !== 'undefined' && window.databuddy) {
window.databuddy.track('form_submit', {
form_type: 'contact',
form_id: formElement.id || 'contact-form'
});
}
};
`}
/>
### Server Actions
Track events from server actions:
{
const data = await request.formData();
// Your form processing logic here
// Note: Server-side tracking requires the Node SDK
// Client-side tracking happens automatically via the script tag
return { success: true };
}
};`}
/>
Then track on the client side after successful submission:
import { enhance } from '$app/forms';
const handleSubmit = () => {
return async ({ result, update }) => {
if (result.type === 'success' && typeof window !== 'undefined' && window.databuddy) {
window.databuddy.track('form_submit_success', {
form_type: 'contact'
});
}
await update();
};
};
`}
/>
### Page-Specific Tracking
Track events on specific pages:
import { onMount } from 'svelte';
onMount(() => {
if (typeof window !== 'undefined' && window.databuddy) {
window.databuddy.track('pricing_page_view', {
page_path: window.location.pathname
});
}
});
function trackPlanClick(planName) {
if (typeof window !== 'undefined' && window.databuddy) {
window.databuddy.track('plan_clicked', {
plan_name: planName,
page_path: window.location.pathname
});
}
}
`}
/>
## Server-Side Tracking
For server-side tracking in SvelteKit, use the Databuddy Node SDK:
) {
await databuddy.track({
name,
properties,
anonymousId: 'server-event', // Use an appropriate identifier
source: 'server'
});
await databuddy.flush();
}`}
/>
## Environment Variables
Store your Client ID and server API key in environment variables:
Then use them in your code. In `src/app.html`, public environment variables are available through the `%sveltekit.env.[NAME]%` placeholder:
`}
/>
Alternatively, import the value from `$env/static/public` in a component:
import { PUBLIC_DATABUDDY_CLIENT_ID } from '$env/static/public';
`}
/>
## Troubleshooting
### Script Not Loading
- Verify the script is in `src/app.html` in the `` section
- Check browser console for errors
- Ensure your Client ID is correct
- Clear browser cache and reload
### Events Not Tracking
- Confirm `window.databuddy` exists before calling tracking methods
- Always check `typeof window !== 'undefined'` for SSR safety
- Check browser console for any errors
- Verify events appear in your Databuddy dashboard after 2-3 minutes
### Route Changes Not Tracked
- Databuddy automatically tracks route changes in SvelteKit
- If needed, use `afterNavigate` from `$app/navigation` for manual tracking
- Check that SvelteKit's client-side navigation is working correctly
### SSR Issues
- Never call `window.databuddy` during SSR (server-side rendering)
- Always wrap tracking calls in `typeof window !== 'undefined'` checks
- Use `onMount` or `afterNavigate` for client-only tracking
## Related Integrations
Lightweight Svelte integration for client-side apps.
App Router and Pages Router support with SSR.
TypeScript support with React hooks and components.
Need help with your SvelteKit integration? Contact us at [support@databuddy.cc](mailto:support@databuddy.cc).