BlogPricingDashboardGitHubGitHub★ 841

Svelte (Vite / Client-Side)

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.

1

Get Your Tracking Script

Navigate to your Databuddy dashboard to get your tracking code snippet:

html
<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="YOUR_CLIENT_ID"
async
></script>

Replace YOUR_CLIENT_ID with your actual Client ID.

2

Locate Your index.html File

For Vite-based Svelte projects, this file is typically located at the root of your project as index.html.

3

Add the Snippet to index.html

Open index.html and paste the Databuddy tracking snippet just before the closing </head> tag or </body> tag.

index.html (Vite)html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Svelte App</title>
  <!-- Databuddy Tracking Snippet -->
  <script
    src="https://cdn.databuddy.cc/databuddy.js"
    data-client-id="YOUR_CLIENT_ID"
    async
  ></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
  <!-- Or place script here, before </body> -->
</body>
</html>

Ensure YOUR_CLIENT_ID is replaced with your actual Client ID.

4

Verify Installation

Deploy your application and check your Databuddy dashboard for incoming data. You can also inspect your browser's network tab to confirm the script is loaded.

Custom Event Tracking

Track custom events from any Svelte component:

svelte
<script>
function handleButtonClick() {
  // Ensure running in browser
  if (typeof window !== 'undefined' && window.databuddy) {
    window.databuddy.track('button_click', {
      component: 'MySvelteComponent',
      button_id: 'cta-button'
    });
  }
}
</script>

<button on:click={handleButtonClick}>
Click Me
</button>

Always check for window.databuddy before calling its methods.

Tracking Route Changes

If you're using a Svelte router and need to manually track page views:

svelte
<script>
import { onMount } from 'svelte';
import { goto } from '$app/navigation'; // SvelteKit example

onMount(() => {
  // Track initial page view
  if (window.databuddy) {
    window.databuddy.screenView({
      path: window.location.pathname
    });
  }
  
  // Track route changes (example for SvelteKit)
  // Adjust based on your router
  const unsubscribe = goto.subscribe(() => {
    if (window.databuddy) {
      window.databuddy.screenView({
        path: window.location.pathname
      });
    }
  });
  
  return () => unsubscribe();
});
</script>

Using Data Attributes

Enable automatic tracking with data attributes by adding this to your script tag:

html
<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="YOUR_CLIENT_ID"
data-track-attributes
async
></script>

Then add data-track attributes directly to elements in your Svelte components:

svelte
<button 
data-track="cta_click" 
data-button-type="primary"
on:click={handleClick}
>
Get Started
</button>

<a 
href="/pricing" 
data-track="pricing_link_click"
data-link-location="header"
>
View Pricing
</a>

Configuration Options

Enable additional tracking features:

html
<script
src="https://cdn.databuddy.cc/databuddy.js"
data-client-id="YOUR_CLIENT_ID"
data-track-attributes
data-track-outgoing-links
data-track-interactions
data-track-performance
data-track-web-vitals
data-track-errors
data-track-scroll-depth
async
></script>

Common Use Cases

Form Submissions

Track form submissions:

svelte
<script>
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'
    });
  }
}
</script>

<form on:submit={handleSubmit}>
<!-- form fields -->
<button type="submit">Submit</button>
</form>

Component Interactions

Track interactions within specific components:

svelte
<script>
let expanded = false;

function toggleAccordion() {
  expanded = !expanded;
  
  if (window.databuddy) {
    window.databuddy.track('accordion_toggle', {
      component: 'FAQ',
      expanded: expanded
    });
  }
}
</script>

<button on:click={toggleAccordion}>
{expanded ? 'Collapse' : 'Expand'}
</button>

SvelteKit Integration

For SvelteKit applications, you can add the script to your root layout:

src/routes/+layout.sveltesvelte
<script>
import { onMount } from 'svelte';

onMount(() => {
  // Inject Databuddy script
  const script = document.createElement('script');
  script.src = 'https://cdn.databuddy.cc/databuddy.js';
  script.setAttribute('data-client-id', 'YOUR_CLIENT_ID');
  script.async = true;
  document.head.appendChild(script);
});
</script>

<slot />

Or add it directly to src/app.html:

src/app.htmlhtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
  <meta name="viewport" content="width=device-width" />
  %sveltekit.head%
  
  <script
    src="https://cdn.databuddy.cc/databuddy.js"
    data-client-id="YOUR_CLIENT_ID"
    async
  ></script>
</head>
<body data-sveltekit-preload-data="hover">
  <div style="display: contents">%sveltekit.body%</div>
</body>
</html>

Troubleshooting

Script Not Loading

  • Verify the script is in the correct location (<head> or before </body>)
  • 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

Need help with your Svelte integration? Contact us at help@databuddy.cc.

How is this guide?

Edit on GitHub