Skip to main content

SvelteKit Integration

Add Ovyxa analytics to your SvelteKit application in minutes. Pageviews are tracked automatically on every route change.

Add the Script to Your Layout​

Open your root layout file (src/routes/+layout.svelte) and add the Ovyxa script in the <svelte:head> block:

<!-- src/routes/+layout.svelte -->
<svelte:head>
  <script
    defer
    data-domain="yourdomain.com"
    src="https://ovyxa.com/js/script.js"
  ></script>
</svelte:head>

<slot />

This ensures the script loads on every page and tracks navigation automatically.

Only Track in Production​

To avoid polluting your analytics during development, conditionally include the script:

<!-- src/routes/+layout.svelte -->
<script>
  import { dev } from '$app/environment'
</script>

<svelte:head>
  {#if !dev}
    <script
      defer
      data-domain="yourdomain.com"
      src="https://ovyxa.com/js/script.js"
    ></script>
  {/if}
</svelte:head>

<slot />

Tracking Custom Events​

Trigger custom events anywhere in your components using the global ovyxa function:

<script>
  function handleSignup() {
    // Your signup logic...

    window.ovyxa('event', 'Signup', { props: { plan: 'starter' } })
  }
</script>

<button on:click={handleSignup}>Sign Up</button>

Cookieless Mode​

If you want to avoid cookie consent banners, add the data-cookieless attribute:

<script
  defer
  data-domain="yourdomain.com"
  data-cookieless
  src="https://ovyxa.com/js/script.js"
></script>

Verify Installation​

  1. Deploy your site (or run vite build && vite preview)
  2. Open your site and check the browser Network tab for a request to ovyxa.com/js/script.js
  3. Visit your Ovyxa dashboard to confirm data is flowing

Next Steps​