Beam for Svelte

Install Beam on Svelte

Replace YOUR_SITE_ID with your Beam site ID from the dashboard.

Add Beam in your root component using onMount

<!-- src/App.svelte -->
<script>
  import { onMount } from 'svelte'

  onMount(() => {
    // onMount only runs in the browser — safe for SSR-aware Svelte builds
    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)
  })
</script>

<slot />

Svelte's onMount lifecycle only runs in the browser, never during server-side rendering. This keeps document and window always available when Beam initialises.

Alternative: script tag in app.html (SvelteKit-free Vite projects)

<!-- index.html (Vite + Svelte) -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      defer
      src="https://beam-privacy.com/js/beam.js"
      data-site-id="YOUR_SITE_ID">
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

For plain Vite + Svelte projects (without SvelteKit), placing the script in index.html is the simplest approach — no component logic needed.

Verify your Svelte integration

Use this checklist after publish so you know tracking is actually live in production.

✓ Run npm run dev and open the app in a browser.
✓ Navigate between two routes (or reload) to confirm tracking fires on each view.
✓ Open your Beam dashboard and confirm paths appear in Top Pages within a minute.
✓ Check that no cookies or localStorage keys are set by the Beam script.

Why Beam works well for Svelte

🍪

No cookie banner required

Beam is cookie-free by design — no consent UI to build, no GDPR overhead for your Svelte app.

⚡

Sub-2KB, zero framework overhead

Beam's script is tiny and deferred, so it adds no noticeable impact to Svelte's already-lean bundle.

🔒

SSR-safe with onMount

Using onMount ensures Beam only runs in the browser — no server-side errors or hydration mismatches.

📊

Decision-ready metrics

See top pages, referrers, countries, and devices without the complexity of GA-style report sprawl.