​
Introduction

This documentation outlines the steps required to integrate Hardal, your custom web visit tracker, into a Next.js application. This guide will walk you through the process of adding the Hardal tracking script to your Next.js project, whether you want it applied globally to all pages or only on specific pages. Follow the steps below to quickly get Hardal running in your Next.js setup.

​
Requirements

Before integrating Hardal into your Next.js application, ensure that you have the following prerequisites in place:

  1. Next.js Project: You need a working Next.js application set up and running. If you haven’t created one yet, you can quickly start by running:

npx create-next-app@latest

  • Hardal Tracking Script URL: You will need the URL to your Hardal tracking script. This script is responsible for tracking page visits and user behavior. Obtain the URL from your Hardal setup page.

  • Basic Understanding of Next.js: Familiarity with Next.js, especially the use of the _document.js file and next/head component, will be helpful.

  • Optional: Google Tag Manager (GTM): If you’re using Google Tag Manager to manage scripts, ensure that GTM is set up and configured in your project for additional flexibility.

​
Setup

Follow the steps below to integrate Hardal into your Next.js application:

1. Create or Modify the `_document.js` File

The `_document.js` file allows you to customize the HTML structure of your Next.js pages. If you don’t have one already, create it in the `pages/_document.js` directory. This file is where you’ll add the Hardal tracking script globally.

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* Add the Hardal tracking script here */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                (function() {
                  var script = document.createElement('script');
                  script.src = 'https://your-hardal-tracker-url'; // Replace with your Hardal script URL
                  script.async = true;
                  document.head.appendChild(script);
                })();
              `,
            }}
          ></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
export default MyDocument;

Replace 'https://your-hardal-tracker-url' with the actual URL of your Hardal tracking script.

​
2. Add Hardal Script to Specific Pages (Optional)

If you prefer to add Hardal tracking only to specific pages, use the next/head component to insert the tracking script on a page-by-page basis.

import Head from 'next/head';

export default function MyPage() {
  return (
    <>
      <Head>
        {/* Hardal tracking code specific to this page */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              (function() {
                var script = document.createElement('script');
                script.src = 'https://your-hardal-tracker-url'; // Replace with your Hardal script URL
                script.async = true;
                document.head.appendChild(script);
              })();
            `,
          }}
        ></script>
      </Head>
      <div>
        {/* Your page content */}
      </div>
    </>
  );
}

Replace 'https://your-hardal-tracker-url' with your Hardal script URL for each specific page where tracking is needed.

​
3. Test the Integration

  • After setting up the script, run your Next.js app using the command:

npm run dev

  • Open your website in the browser and check the developer console (F12) to ensure the Hardal script is being loaded without errors.

  • You can also view the page source to confirm that the script is properly included.

​
4. Verify Data Collection

Once the integration is live, visit your Hardal dashboard to ensure that page visits and events are being tracked correctly.

Was this page helpful?