Integrate Vemetric into your Next.js application

Easily integrate Vemetric into your Next.js application.

Next.js 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 Next.js application.

Installation

Install the React SDK

In your project directory, run:

npm install @vemetric/react

Initialize Vemetric in the App Router

Import and include the VemetricScript component in the root layout.tsx file of your App Router in Next.js:

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

export default function RootLayout(props: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>
        <VemetricScript token="YOUR_PROJECT_TOKEN" />
        {props.children}
      </body>
    </html>
  );
}

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

Initialize Vemetric in the Pages Router

Import and include the VemetricScript component in the _app.tsx file of your Pages Router in Next.js:

import type { AppProps } from 'next/app';
import { VemetricScript } from '@vemetric/react';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <VemetricScript token="YOUR_PROJECT_TOKEN" />
      <Component {...pageProps} />
    </>
  );
}

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.

Google Tag Manager

Easily integrate Vemetric using Google Tag Manager.

React Router (Remix)

Easily integrate Vemetric into your React Router application.