Trackthemetric Logo

Trackthemetric + Next.js (App Router)

If you're using Next.js with the App Router (v13+), you can easily add Trackthemetric analytics to your site.

1
Include the tracking script globally

Since every page in your app shares the same root layout, the tracking snippet should go there.

1. Open app/layout.tsx or app/layout.jsx file.

2. Import the Script component from next/script.

3. Add the Trackthemetric script inside the <head> tag so it loads across all routes.

Here is an example setup:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          id="TrackTheMetric"
          data-website-id="YOUR_WEBSITE_ID"
          data-domain="YOUR_DOMAIN.COM"
          src="https://app.trackthemetric.com/tracker.js"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  );
};

Make sure to replace the YOUR_WEBSITE_ID and YOUR_DOMAIN.COM with your actual website ID and domain.

Commit the changes and redeploy your app once you're done.

2
Confirm everything is working

After deployment:

  • Open your production site in the browser.
  • Head over to your Trackthemetric dashboard.
  • Within a few minutes, you should see traffic starting to appear.