Beam for Remix

Add cookie-free analytics to your Remix app with one script include in your root document. Beam keeps routing analytics clean without introducing consent-banner overhead.

Get started free Explore live demo

No credit card required and setup in minutes

Install Beam on Remix

Replace YOUR_SITE_ID with your Beam site ID from the dashboard.

Add to app/root.tsx

// app/root.tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react'

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <Scripts />
        <script
          defer
          src="https://beam.keylightdigital.dev/js/beam.js"
          data-site-id="YOUR_SITE_ID"
        />
      </body>
    </html>
  )
}

Placing Beam after <Scripts /> keeps hydration order clean and avoids render blocking.

Optional explicit route-change tracking

import { useEffect } from 'react'
import { useLocation } from '@remix-run/react'

function BeamPageTracker() {
  const location = useLocation()
  useEffect(() => {
    window.beam?.track?.('route_change', { path: location.pathname })
  }, [location.pathname])
  return null
}

// Mount <BeamPageTracker /> in app/root.tsx body

Beam auto-captures standard pageviews; this optional hook helps if your app has advanced transition patterns.

Verify your Remix integration

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

✓ Deploy, then open the app and navigate between two Remix routes without full reloads.
✓ Confirm path-level traffic appears in Beam Top Pages.
✓ Use an external referrer click (for example from search/social) to validate source attribution.

Why Beam works well for Remix

🍪

No consent banner project

Beam keeps Remix builds cookie-free and avoids legal UI work tied to traditional analytics tools.

⚡

Light client footprint

Async script loading keeps server-rendered response performance strong.

🧭

Route-level visibility

Track which Remix paths and funnels are performing without wiring heavy analytics SDKs.

🔒

Privacy by design

No personal identifiers or ad-tech integration means lower compliance risk.