Svelte/SvelteKit Integration

Set up Affonso tracking in your Svelte or SvelteKit application with different approaches for regular Svelte apps and full-stack SvelteKit projects.

SvelteKit Integration

Method 1: App HTML Template (Recommended)

Update your src/app.html file:

<!DOCTYPE html>
<html lang="en" %sveltekit.theme%>
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <script
      async
      defer
      src="https://affonso.io/js/pixel.min.js"
      data-affonso="YOUR_PUBLIC_PROGRAM_ID"
      data-cookie_duration="30"
    ></script>

    %sveltekit.head%
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

Method 2: Layout Component

Add to your src/routes/+layout.svelte:

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.setAttribute('data-affonso', 'YOUR_PUBLIC_PROGRAM_ID');
    script.setAttribute('data-cookie_duration', '30');
    script.src = 'https://affonso.io/js/pixel.min.js';
    document.head.appendChild(script);
  });
</script>

<main>
  <slot />
</main>

Regular Svelte Integration

Method 1: Main Component

Add to your main App.svelte:

<script>
  import { onMount } from 'svelte';

  onMount(() => {
    const script = document.createElement('script');
    script.async = true;
    script.defer = true;
    script.setAttribute('data-affonso', 'YOUR_PUBLIC_PROGRAM_ID');
    script.setAttribute('data-cookie_duration', '30');
    script.src = 'https://affonso.io/js/pixel.min.js';
    document.head.appendChild(script);
  });
</script>

<main>
  <!-- Your app content -->
</main>

Method 2: Index HTML

Add directly to your public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Your Svelte App</title>

    <script
      async
      defer
      src="https://affonso.io/js/pixel.min.js"
      data-affonso="YOUR_PUBLIC_PROGRAM_ID"
      data-cookie_duration="30"
    ></script>
  </head>
  <body></body>
</html>