Install on Next.js

A client component in your root layout counts the first page and every client-side route change after it.

Before you paste anything

Every snippet below shows YOUR-SITE-ID . Replace it with your own site id, which is on the Tracking Code page of the site in your account. If you do not have an account yet, creating one and adding your domain takes about a minute.

Create a free account

Add the tracker component

Create app/components/VeritaMetricsTracker.tsx with the code below.
Add NEXT_PUBLIC_VERITAMETRICS_SITE_ID and NEXT_PUBLIC_VERITAMETRICS_TRACKING_DOMAIN to .env.local, and to your hosting provider’s environment settings.
Import the component in app/layout.tsx and render it inside <body>.
Restart the dev server, or redeploy, and load any page.

app/components/VeritaMetricsTracker.tsx

/*
  VeritaMetrics Full Analytics (Next.js App Router)
  
  Instructions:
  1. Create this file at: app/components/VeritaMetricsTracker.tsx
  2. Add your Site ID and Tracking Domain to your environment variables (.env.local):
     NEXT_PUBLIC_VERITAMETRICS_SITE_ID="YOUR-SITE-ID"
     NEXT_PUBLIC_VERITAMETRICS_TRACKING_DOMAIN="www.veritametrics.com"
  3. Import and add this component to your root layout: app/layout.tsx
*/

// app/components/VeritaMetricsTracker.tsx
'use client';

import { useEffect, Suspense } from 'react';
// usePathname and useSearchParams are no longer needed here.
// The new tracker.js handles SPA navigation automatically.

// The tracker attaches itself to window.verita, so TypeScript has to be told the
// property exists. Without this, `next build` fails with "Property 'verita' does
// not exist on type 'Window'" and your site will not deploy.
type VeritaCommand = (...args: unknown[]) => void;

declare global {
  interface Window {
    verita: VeritaCommand & { q?: IArguments[]; l?: number; loaded?: boolean };
  }
}

const siteId = process.env.NEXT_PUBLIC_VERITAMETRICS_SITE_ID;
const trackingDomain = process.env.NEXT_PUBLIC_VERITAMETRICS_TRACKING_DOMAIN;

function Tracker() {
  useEffect(() => {
    if (!siteId || !trackingDomain || typeof window === 'undefined') {
      return;
    } // Guard against React 18 strict mode double-mount

    if (window.verita && window.verita.loaded) {
      return;
    }
    // 1. Initialize the Async Command Queue

    window.verita =
      window.verita ||
      function () {
        (window.verita.q = window.verita.q || []).push(arguments);
      };
    window.verita.l = new Date().getTime(); // 2. Enhanced event tracker

    const script = document.createElement('script');
    script.src = `https://${trackingDomain}/api/tracker.js?siteId=${siteId}`;
    script.async = true;
    script.defer = true;
    script.dataset.siteId = siteId;
    script.dataset.trackingDomain = trackingDomain;
    document.head.appendChild(script); // 3. Send the initial pageview using the queue

    window.verita('trackPageView');
  }); // Empty dependency array ensures this runs ONCE on mount.
  // The new tracker.js handles all subsequent SPA navigations.
  return null;
}

export function VeritaMetricsTracker() {
  return (
    <Suspense fallback={null}>
            <Tracker />   {' '}
    </Suspense>
  );
}

/*
  VeritaMetrics noscript Fallback
  
  Instructions:
  Add this directly to your root layout (app/layout.tsx) before the closing </body> tag.
  This ensures users with JavaScript disabled are still tracked.
*/

/*
// app/layout.tsx - Example Usage

import { VeritaMetricsTracker } from '@/components/VeritaMetricsTracker';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <VeritaMetricsTracker />
        <noscript>
          <img
            src={`https://YOUR_TRACKING_DOMAIN/api/track-pageview?siteId=YOUR_SITE_ID`}
            referrerPolicy="unsafe-url"
            alt=""
            width="1"
            height="1"
            style={{ display: 'none' }}
            aria-hidden="true"
          />
        </noscript>
      </body>
    </html>
  );
}
*/

Check that the data is arriving

Open your site in a browser and load any page.
In VeritaMetrics, open the site and click Tracking Code in the sidebar. The status turns active and your visit appears in the recent-pageviews list within a few seconds.

If nothing arrives, open your browser devtools on the Network tab and reload. You should see a request to /api/tracker.js that returns 200, then a request to /api/v1/c when you move or scroll.

The environment variables are read at build time

Next.js inlines NEXT_PUBLIC_ variables when it builds. Adding them after a deploy changes nothing until the next build, and the component then runs with an undefined site id and returns without sending anything. Set both variables in your hosting provider, then trigger a fresh build.

Guides for other platforms

The same install, on a different stack.

HTML GTM WordPress Shopify Astro React PHP Wix Webflow Squarespace Flutter

Explore the documentation

Jump to another guide.

Platform install guides Where the snippet goes, per platform WordPress plugin Install, consent, and the wp-admin widget Dashboard overview Key metrics and how to read them Autocapture Automatic event tracking, no tagging Engagement metrics Active time and scroll depth Warm-lead capture Open a KirokuForms form on intent Session replay Privacy-safe journey reconstruction Growth insights Site-health score and prioritized fixes Filtering & segmentation Slice reports by any dimension Goals & data export Track conversions, export CSV, JSON, XLSX Custom events & definitions Name and shape your own events API reference Endpoints, parameters, examples