SvelteKit

Overview

Alytica is a privacy-focused, lightweight web analytics tool designed to provide deep insights into user interactions within SvelteKit applications. With its seamless integration and minimal performance impact, Alytica helps developers understand user behavior effortlessly.

Key Features

Automatic page view tracking
Custom event tracking
SvelteKit server-side rendering compatibility
Lightweight and performance-optimized
Easy client-side implementation

Integration Steps

1. Script Injection Methods

Option 1: App Layout

In your +layout.svelte, dynamically inject the script:

<script>
  import { onMount } from 'svelte';
  
  onMount(() => {
    const script = document.createElement('script');
    script.src = '/path/to/alytica.js';
    script.setAttribute('data-website-id', 'YOUR_WEBSITE_ID');
    script.setAttribute('data-domain', 'yourdomain.com');
    document.body.appendChild(script);
  });
</script>
 
<slot />

Option 2: Root HTML Template

In your app.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script 
      src="/path/to/alytica.js"
      data-website-id="YOUR_WEBSITE_ID"
      data-domain="yourdomain.com"
    ></script>
    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

2. Custom Event Tracking

Basic Event Tracking

<script>
  function handleSignup() {
    window.alytica('signup', { 
      email:"user@email.com"
    });
  }
</script>
 
<button on:click={handleSignup}>Sign Up</button>

Payment Event Tracking

If you want to use our payment attribution features you need to set up payment event tracking on your payment confirmation page like this:

<script>
  function handlePayment() {
    window.alytica('payment', { 
      email:"customer@email.com", 
      amount:69.99
    });
  }
</script>
<div>
Confirm Payment
<button on:click={handleSignup}>Sign Up</button>
</div>

Custom Event Tracking

You can track not only signups and payments, but also any event thay you want and any custom data that you think would be helpful

<script>
  function handleAddToCart(product) {
    window.alytica('add_to_cart', { 
      productId: product.id,
      productName: product.name,
      price: product.price,
      quantity: 1
    });
  }
// this would be dynamic usually
  const product = {
    id: '123',
    name: 'Sample Product',
    price: 49.99
  };
</script>
 
<button on:click={() => handleAddToCart(product)}>Add to Cart</button>

4. Server-Side Considerations

While Alytica primarily tracks client-side events, you can still log server-side insights (We are working on creating our sdk for tracking server-side and client-side events):

// src/routes/api/track/+server.js
export async function POST({ request }) {
  const eventData = await request.json();
  
  // Log or process server-side event data
  console.log('Server-side event:', eventData);
 
  return new Response(null, { status: 200 });
}

Best Practices

Initialize tracking in a non-blocking manner
Use onMount for client-side script injection
Keep event payloads lightweight and meaningful
Respect user privacy by avoiding sensitive data tracking

Testing Your Integration

Click the Verify Script button in the setup form. This will automatically check if the script is correctly installed and configured on your website.
- If successful, you'll see a "Verification Successful" message.
- If it fails, review the script placement and domain settings, then try again.
Check Network tab for https://alytica.tech/api/track-visit calls
Verify custom events are being sent
Use Alytica's dashboard for comprehensive insights

Performance Considerations

Alytica script is async and non-blocking
Minimal overhead on SvelteKit application performance
No impact on server-side rendering (SSR) processes

Compatibility

Works with SvelteKit 1.x and 2.x
Compatible with both server-side rendering and client-side navigation
Supports static site generation (SSG) modes

Conclusion

Alytica provides a seamless, developer-friendly analytics solution for SvelteKit applications. By implementing these integration steps, you'll gain deep insights into user behavior with minimal configuration complexity and performance overhead.

Visit Alytica Dashboard →