Analytics for Remix
Remix embraces web fundamentals — loaders, actions, and progressive enhancement. BetterMeter follows the same philosophy: a single script tag, no build step integration, and a noscript pixel fallback for users with JavaScript disabled.
Add the tracker in root.tsx
Remix's root.tsx wraps every route in your app. Add the BetterMeter script here and it covers all pages — including nested routes rendered via <Outlet />.
import {
Links, Meta, Outlet, Scripts, ScrollRestoration,
} from "@remix-run/react";
export default function App() {
return (
<html lang="en">
<head>
<Meta />
<Links />
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<script
defer
data-site="your-domain.com"
src="https://bettermeter.com/api/script"
/>
</body>
</html>
);
}Nested routes give granular analytics
Remix's file-based nested routing means each URL segment maps to a route module. When a user navigates between nested routes, BetterMeter tracks each URL change as a separate page view. You get clean, hierarchical analytics that mirror your route structure.
Progressive enhancement alignment
- 01 JavaScript enabled — The tracker script fires page views on client-side navigations via the History API.
- 02 JavaScript disabled — Remix still works as a traditional MPA. Each full page load triggers the tracker script fresh.
- 03 Noscript fallback — Add a 1x1 pixel
<noscript>tag to track visits even when JS is completely blocked. - 04 No hydration cost — The tracker is a plain script tag, not a React component. It doesn't participate in Remix's hydration cycle.
Loader data stays private
BetterMeter only tracks page URLs and referrers — it never reads loader data, form submissions, or action responses. Your server-side data stays on the server. Analytics runs entirely in the browser, separate from your Remix data flow.