Beam for React

Install Beam on React

Replace YOUR_SITE_ID with your Beam site ID from the dashboard.

Add the script tag to public/index.html

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <script
      defer
      src="https://beam-privacy.com/js/beam.js"
      data-site-id="YOUR_SITE_ID">
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Place the defer script in <head> so Beam loads after your React app without blocking render.

Optional: useBeam hook for SPA route tracking

// src/hooks/useBeam.ts
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

export function useBeam() {
  const location = useLocation()
  useEffect(() => {
    // Beam auto-sends a pageview on initial load.
    // This hook fires on every client-side navigation.
    window.beam?.track?.('pageview', { path: location.pathname })
  }, [location.pathname])
}

// Mount it once near the top of your app:
// src/App.tsx
import { useBeam } from './hooks/useBeam'

export default function App() {
  useBeam()
  return <RouterOutlet />
}

React Router changes the URL without a full page reload, so Beam's initial auto-capture only fires once. This hook re-fires on every route change to keep path-level analytics accurate.

Verify your React integration

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

✓ Run your dev server and open the app in a browser.
✓ Navigate between two routes using React Router links (not full reloads).
✓ Open your Beam dashboard and confirm both 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 React

🍪

No cookie banner required

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

⚡

Sub-2KB, zero dependencies

Beam's tracking script is lighter than a single React component and adds no npm dependencies.

🧭

SPA-aware route tracking

The useBeam hook captures every client-side navigation, so your Top Pages report reflects real user behaviour.

🔒

Privacy by default

No PII, no fingerprinting, no ad-tech — just page-level metrics your team can act on.