My Svelte App

# Svelte (Vite / Client-Side) > Add cookieless product analytics to your Svelte 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 standard client-side Svelte applications, typically built using Vite (e.g., via `npm create vite@latest -- --template svelte`). ## How to Add Databuddy to Your Client-Side Svelte App The most straightforward method is to add the Databuddy tracking script directly to your `index.html` file. Navigate to your [Databuddy dashboard](https://app.databuddy.cc) to get your tracking code snippet: `} /> Replace `YOUR_CLIENT_ID` with your actual Client ID. For Vite-based Svelte projects, this file is typically located at the root of your project as `index.html`. Open `index.html` and paste the Databuddy tracking snippet just before the closing `` tag or `` tag. My Svelte App

`} /> 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 client-side Svelte SPAs. If you're using a custom router or page views aren't tracked correctly after navigation, you can manually trigger `window.databuddy.screenView()` after each route change using your router's navigation events. ## Custom Event Tracking Track custom events from any Svelte component: function handleButtonClick() { // Ensure running in browser if (typeof window !== 'undefined' && window.databuddy) { window.databuddy.track('button_click', { component: 'MySvelteComponent', button_id: 'cta-button' }); } } `} /> Always check for `window.databuddy` before calling its methods. ## Tracking Route Changes SPA navigation is tracked automatically: Databuddy detects browser history changes, so routers that use the History API (including svelte-routing and svelte-spa-router with hash tracking enabled) need no extra code. ## 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: function handleSubmit(event) { event.preventDefault(); // Your form submission logic here if (window.databuddy) { window.databuddy.track('form_submit', { form_type: 'contact', form_id: 'contact-form' }); } } `} /> ### Component Interactions Track interactions within specific components: let expanded = false; function toggleAccordion() { expanded = !expanded; if (window.databuddy) { window.databuddy.track('accordion_toggle', { component: 'FAQ', expanded: expanded }); } } `} /> ## SvelteKit Integration Using SvelteKit? Follow the dedicated [SvelteKit guide](/docs/Integrations/sveltekit) for layout and `app.html` setup. ## Troubleshooting ### Script Not Loading - Verify the script is in the correct location (`` or before ``) - 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 - Check browser console for any errors - Verify events appear in your Databuddy dashboard after 2-3 minutes - Use browser dev tools Network tab to confirm requests are being sent ### Route Changes Not Tracked - Databuddy automatically tracks route changes for most routers - If using a custom router, manually call `window.databuddy.screenView()` on route changes - Check that your router triggers browser history changes ## Related Integrations Full SvelteKit support with SSR and automatic route tracking. TypeScript support with React hooks and components. Angular integration with service-based tracking. Need help with your Svelte integration? Contact us at [support@databuddy.cc](mailto:support@databuddy.cc).