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:

npm install @vemetric/react

Include the Vemetric Component

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

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:

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

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

See the React SDK docs for a detailed explanation of the available parameters.

Also learn more about User Identification to track authenticated users and see their full journey.

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.

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 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 for more information.

Next.js

Easily integrate Vemetric into your Next.js application.

Dashboard

Explore and understand your data with Vemetric’s interactive dashboard.