Web Setup

Before you install

Start with the default URL, analytics.usehardal.com, without changing DNS. For production, set up your custom first-party URL, such as collect.yourdomain.com, and wait for its DNS record to resolve.

Then open Setup in the Dashboard. Copy the generated snippet so the active URL, Tenant ID, and Source ID match your account.

The snippet from the Dashboard already uses whichever URL is active, default or custom; see Custom Domain.

Install the script

<script
  async
  src="https://analytics.usehardal.com/tracker.js"
  data-host-url="https://analytics.usehardal.com"
  data-tenant-id="your-tenant-id"
  data-source-id="your-source-id"
  data-auto-track="true"
  data-spa="true">
</script>

import Script from "next/script";

const HRD_URL = "https://analytics.usehardal.com";
const HRD_TRACKER_SRC = HRD_URL + "/tracker.js";
const HRD_TENANT_ID = "your-tenant-id";
const HRD_SOURCE_ID = "your-source-id";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="hrd-tracker"
          strategy="afterInteractive"
          src={HRD_TRACKER_SRC}
          data-host-url={HRD_URL}
          data-tenant-id={HRD_TENANT_ID}
          data-source-id={HRD_SOURCE_ID}
          data-auto-track="true"
          data-spa="true"
        />
      </body>
    </html>
  );
}

Script attributes

Choose a tracker name

Add data-global-name to your existing tracker script to call the API through a name of your choice:

<script
  async
  src="https://analytics.usehardal.com/tracker.js"
  data-host-url="https://analytics.usehardal.com"
  data-tenant-id="your-tenant-id"
  data-source-id="your-source-id"
  data-global-name="myAnalytics"
  data-auto-track="true"
  data-spa="true">
</script>

After the tracker loads, use the chosen name:

window.myAnalytics.track("signup_button_click", {
  plan: "pro",
  placement: "pricing"
});

window.myAnalytics and window.hrd point to the same tracker and share the same session, event queue, consent state, and user identity. Both names expose track, pageview, identify, consent, and consentStatus.

Names can contain ASCII letters, digits, _, and $, and must start with a letter, _, or $. JavaScript reserved words and the names __proto__, constructor, and prototype are rejected. Surrounding whitespace is trimmed; an empty name uses hrd.

If the name is invalid or already used by the page, the tracker logs a console warning and keeps window.hrd available. Existing globals are preserved.

Privacy by default

The base tracker can collect anonymous first-party analytics without attaching a known user identity. Your consent and disclosure requirements still depend on your implementation, destinations, and applicable law.

When a visitor grants consent, send the consent state so Hardal can link activity according to your configuration.

What gets tracked automatically

With data-auto-track="true", the script sends page_view when the page first loads.

With data-spa="true", it also sends page_view after client-side route changes, including history and hash changes. It skips duplicate page views for the same URL.

Do not assume scrolls, outbound clicks, form submissions, or purchases are collected automatically.

Send a page view manually

If you disable automatic page views or manage route changes yourself, use the tracker’s page-view helper:

hrd.pageview();

Pass a URL and optional page data when the tracked URL differs from the current browser location:

hrd.pageview("https://www.yourdomain.com/pricing", {
  route_name: "pricing"
});

The helper skips a duplicate page view for the same URL.

Send additional events

Send purchases, leads, and other business events explicitly. For events confirmed on your server, use the API & Server-side setup. Use the event guides below to choose consistent names and parameters.

Content Security Policy

If your site uses Content Security Policy, allow the active URL for both the script and collection requests. For the default URL:

script-src 'self' https://analytics.usehardal.com;
connect-src 'self' https://analytics.usehardal.com;

Verify it works

Open your site and check the browser Network panel:

• tracker.js loads from your active default or custom URL.
• On a normal page load, the tracker sends a POST request to /collect/. The endpoint returns 202.
• The request uses text/plain, which avoids a JSON preflight.
• The body contains tenantId, an anonymousSessionId, and an events array. The automatic page view has type: "page_view" and eventName: "page_view".
• The event payload uses the Source ID shown in Setup.

Then open Sources in the Dashboard. A source with recent events confirms that data is reaching Hardal.