Install on React Router

In framework mode, the tag goes in the Layout export of app/root.tsx. That works with server rendering, prerendering and SPA mode (ssr: false).

Framework mode

1. Copy your snippet

   In MetricRaven, open your site's Settings → Install card and copy the script tag. It already contains your site ID.

2. Add the script to the Layout head

   Replace YOUR_SITE_ID with the public site ID from your site's Settings → Install card. The site ID is public and safe in browser code; never put your secret key in a page.

   app/root.tsx

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   17

   18

   19

   20

   21

   22

   23

   24

   25

   26

   27

   28

   29

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

   Keep your existing Layout and add only the <script> element. In SPA mode the Layout is rendered into index.html at build time, so the tag ships in the static file.

3. Build, deploy and open your app

   react-router dev runs on localhost, which is not tracked by default; check the deployed app.

Library (declarative or data) mode

If you create the router yourself with createBrowserRouter or <BrowserRouter> in a Vite app, put the tag in index.html as in the React (Vite) guide.

Notes

• <Link> navigation uses the history API, which the tracker records. You don't need a route-change listener.
• Click between a few pages and check the Network panel shows one /api/v1/collect pageview per navigation. Two per click means the tag is loaded twice.
• Track events from components with window.analytics.track(); see Goals & funnels.
• If you upgraded from Remix, app/root.tsx is the same file you used there.

Optional script attributes are listed in Install & verify. To exclude your own visits, see Exclude your visits.