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.

Keep in mind that one project can be used to track data from multiple websites, which can be useful when you for example want to track users across your landing page and web application. We’ve also created a guide on how to track data across subdomains.

For more sophisticated integrations, see the Tracking Custom Events or User Identification sections.

See the React SDK Docs, for further configuration options and available functions.

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.

Next.js

Easily integrate Vemetric into your Next.js application.

Dashboard

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