Install Visitors on SvelteKit

SvelteKit provides several ways to integrate third-party scripts. Here are the recommended approaches for adding Visitors analytics.

Replace YOUR_TOKEN with your project token.

Using app.html

The simplest approach is to add the script tag directly to your src/app.html file.

src/app.html

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    %sveltekit.head%
7    <script 
8      src="https://cdn.visitors.now/v.js" 
9      data-token="YOUR_TOKEN">
10    </script>
11  </head>
12  <body data-sveltekit-preload-data="hover">
13    <div style="display: contents">%sveltekit.body%</div>
14  </body>
15</html>

Using svelte:head

You can also add the script using Svelte's svelte:head in your root layout:

src/routes/+layout.svelte

1<svelte:head>
2  <script 
3    src="https://cdn.visitors.now/v.js" 
4    data-token="YOUR_TOKEN">
5  </script>
6</svelte:head>
7
8<main>
9  <slot />
10</main>

Dynamic loading

For more control over when the script loads:

src/routes/+layout.svelte

1<script>
2  import { onMount } from 'svelte'
3  
4  onMount(() => {
5    const script = document.createElement('script')
6    script.src = 'https://cdn.visitors.now/v.js'
7    script.setAttribute('data-token', 'YOUR_TOKEN')
8    script.async = true
9    
10    document.head.appendChild(script)
11    
12    return () => {
13      document.head.removeChild(script)
14    }
15  })
16</script>
17
18<main>
19  <slot />
20</main>

Install Visitors on SvelteKit

Using app.html

Using svelte:head

Dynamic loading

On this page