---
title: "React Router (Remix) | Installation | Documentation - Vemetric"
description: "Easily integrate Vemetric into your React Router application."
url: https://vemetric.com/docs/installation/react-router
---

# Integrate Vemetric into your React Router application

Easily integrate Vemetric into your React Router application.

* * *

React Router (or Remix) is a popular React framework for sophisticated web applications using React.

We’ve prepared the following step-by-step guide to help you integrate Vemetric into your React Router application.

## Installation

### Install the React SDK

In your project directory, run:

```bash
npm install @vemetric/react
```

### Include the Vemetric Component

Import and include the `VemetricScript` component in the `Layout` Component of the `root.tsx` file:

```tsx
import { Links, Meta, Outlet, Scripts, ScrollRestoration } from 'react-router';
import { VemetricScript } from '@vemetric/react';

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 />
    </head>
    <body>
        <VemetricScript token="YOUR_PROJECT_TOKEN" />
        {children}
        <ScrollRestoration />
        <Scripts />
    </body>
    </html>
  );
}

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

> Replace `YOUR_PROJECT_TOKEN` with the unique token for your project (found in the project settings).

### Verify installation

Once added, Vemetric will automatically start tracking page views on your site (each page load will be recorded). You can verify this by checking your Vemetric dashboard for incoming pageview events a few seconds after loading a page.

> Data from `localhost` won’t be tracked.

### Optional: Track custom events and identify logged-in users

You can track custom events from any Component by importing the `vemetric` object:

```tsx
import { vemetric } from '@vemetric/react';

export function MyComponent() {
  return (
    <button onClick={() => vemetric.trackEvent('button_clicked')}>
      Click me
    </button>
  );
}
```

See the [React SDK docs](https://vemetric.com/docs/sdks/react#trackevent) for a detailed explanation of the available parameters.

Also learn more about [User Identification](https://vemetric.com/docs/product-analytics/user-identification) to track authenticated users and see their [full journey](https://vemetric.com/docs/product-analytics/user-journeys).

> This guide is only about integrating Vemetric on the client side. If you want to track events on the server side, you can use the [Node.js SDK](https://vemetric.com/docs/sdks/nodejs).

## Related Resources

> We highly recommend you to use a custom proxy in front of Vemetric for better results. See our guide on [setting up a custom proxy](https://vemetric.com/docs/advanced-guides/using-a-proxy) for more information.

Also keep in mind that one project can be used to track data from multiple websites or applications. See our guide on [tracking across subdomains](https://vemetric.com/docs/advanced-guides/track-across-subdomains) for more information.