How to add analytics to Remix and React Router v7

Remix v2 and React Router v7's framework mode share the same model: app/root.tsx renders the whole HTML document, including <head>. A plain <script> element there is part of the server HTML, so the browser loads it once; React hydrates around it without running it again.

How to install VisitTrack on Remix

1. 1

   Step 1: Copy your site id

   Copy the snippet from VisitTrack's install step (or Settings → General) and replace SITE_ID below.

2. 2

   Step 2: Add the tag to app/root.tsx

   In React Router v7 the imports come from react-router; in Remix v2 they come from @remix-run/react. Everything else is identical.

   app/root.tsxCopy

   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 defer data-site="SITE_ID" src="https://visitrack.app/tracker.js" />
         </head>
         <body>
           {children}
           <ScrollRestoration />
           <Scripts />
         </body>
       </html>
     );
   }
   
   export default function App() {
     return <Outlet />;
   }

3. 3

   Step 3: Allow it in your CSP, if you send one

   If you set a Content-Security-Policy in entry.server.tsx or at your host, add https://visitrack.app to script-src and connect-src.

4. 4

   Step 4: Deploy and browse

   The dev server runs on localhost, which is ignored. Deploy and click between routes on the live site.

How to check VisitTrack is working on Remix

1. View source on a deployed page — the tag is in the server HTML, inside <head>.
2. Navigate between routes with <Link>s; the VisitTrack live view shows you and the Pages tab lists each route.
3. DevTools → Network: one POST to visitrack.app/api/collect per navigation. Loader fetches and useFetcher calls don't change the URL, so they never add pageviews.

Does VisitTrack track Remix page navigation?

Remix and React Router navigate with history.pushState, which the tracker wraps (along with replaceState and popstate). <Link>, <Form> submissions that redirect, redirect() from an action and useNavigate() all land as pageviews once the URL changes.

Search-param-only updates — setSearchParams({ page: "2" }) — keep the same pathname and aren't counted again, which keeps filters and pagination from inflating pageviews.

How to track custom events and goals in Remix

The most reliable place to record a signup is the server, in the action that created the account. Pass the visitor id from the browser in a hidden field so the event joins the visitor's earlier pageviews and source.

// In the form (browser): <input type="hidden" name="vid" value={visitorId} />
// where visitorId = window.visitrack?.visitorId?.() read in a useEffect.

export async function action({ request }: Route.ActionArgs) {
  const form = await request.formData();
  const user = await createUser(String(form.get("email")));
  const visitorId = String(form.get("vid") || "");
  if (visitorId) {
    await fetch("https://visitrack.app/api/track", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.VISITRACK_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        type: "event",
        visitorId, // the _ana_vid value the browser sent you
        name: "signup",
        props: { method: "email" },
      }),
    });
  }
  return redirect("/welcome");
}

In the browser, window.visitrack?.("name", props) and data-vt-goal="…" work as in any React app. Server events need a secret key from Settings → API / MCP — never ship it to the client. Full reference: server-side events.

Revenue attribution on Remix

Start Stripe Checkout from an action and pass the same visitor id as client_reference_id; VisitTrack's webhook then credits the payment to the visitor's first referrer, campaign and landing page. Lemon Squeezy, Polar, Paddle and Razorpay each have their own metadata field — see Revenue attribution and Stripe.

Script options you might need on Remix

All optional — add them to the same tag. Full reference: script configuration.

Remix troubleshooting

Not on Remix? See all 29 integration guides.