React Router

In React Router framework mode (v7 and later, the successor to Remix), app/root.tsx renders the <html> document for every route. Add the snippet to the <head> in its Layout export. This guide supersedes the Remix guide; if you use React Router only as a library inside a Vite app, follow the React (Vite / CRA) guide instead.

Get your tracking snippet

In your Rybbit dashboard, open Site Settings → Tracking Script and copy your snippet. It looks like this:

<script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>

YOUR_SITE_ID is the numeric ID of your site. If you self-host Rybbit, app.rybbit.io is the domain of your own instance.

Add the snippet to React Router

Open app/root.tsx and add the tag inside <head> of the Layout component, after <Meta /> and <Links />. Layout wraps the app, HydrateFallback and ErrorBoundary, so the snippet stays in place in every state:

app/root.tsx

import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
        <script src="https://app.rybbit.io/api/script.js?siteId=YOUR_SITE_ID" defer></script>
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

If your root.tsx has no Layout export, add the tag to the <head> of the default App component instead. Restart the dev server after the change. Client-side navigation through <Link> and useNavigate() is tracked automatically as pageviews.

Verify installation

Open your live site in a new tab and click through a few pages. Within a few seconds the pageviews appear in the Rybbit dashboard.

If nothing shows up:

View the page source and search for script.js?siteId= to confirm the snippet is on the page.
Open the browser Network tab and check that script.js returns 200 and that POST requests go to /api/track.
Disable ad blockers, or set up a proxy so the script loads from your own domain.
See the script troubleshooting guide for other common causes.

Track custom events

Call window.rybbit.event() from any route or component. Check for window first, because route modules also render on the server.

app/routes/pricing.tsx

export default function Pricing() {
  const handleClick = () => {
    if (typeof window !== "undefined" && window.rybbit) {
      window.rybbit.event("plan_selected", { plan: "pro" });
    }
  };

  return <button onClick={handleClick}>Choose Pro</button>;
}

Troubleshooting

Nonce-based Content Security Policy: if you pass a nonce to <Scripts /> and <ScrollRestoration />, add the same nonce attribute to the Rybbit tag, otherwise the browser blocks it.

Next steps

Track custom events such as signups, purchases and button clicks.
Identify users to connect sessions to accounts.
Proxy the script through your own domain to bypass ad blockers.
Script attributes let you skip or mask URLs and tag events.