Beam for SvelteKit

Install Beam on SvelteKit

Replace YOUR_SITE_ID with your Beam site ID from the dashboard.

Add Beam to src/routes/+layout.svelte

<!-- src/routes/+layout.svelte -->
<script>
  import { onMount } from 'svelte'
  import { afterNavigate } from '$app/navigation'

  onMount(() => {
    // Inject the Beam script once on first browser load
    const script = document.createElement('script')
    script.defer = true
    script.src = 'https://beam-privacy.com/js/beam.js'
    script.setAttribute('data-site-id', 'YOUR_SITE_ID')
    document.head.appendChild(script)
  })

  // Fire a pageview on every SvelteKit client-side navigation
  afterNavigate(({ to }) => {
    window.beam?.track?.('pageview', { path: to?.url.pathname ?? window.location.pathname })
  })
</script>

<slot />

onMount runs once on initial browser load. afterNavigate fires after every SvelteKit client-side route transition — keeping Top Pages accurate across your entire app without a full page reload.

Alternative: add script to app.html (simpler, no SPA route tracking)

<!-- src/app.html -->
<!DOCTYPE html>
<html lang="%sveltekit.lang%">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    %sveltekit.head%
    <script
      defer
      src="https://beam-privacy.com/js/beam.js"
      data-site-id="YOUR_SITE_ID">
    </script>
  </head>
  <body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
  </body>
</html>

This approach works for mostly server-rendered SvelteKit sites where full-page navigations are the norm. For SPAs with client-side routing, use the +layout.svelte approach above to capture route changes.