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 use Check hostname to confirm it is ready.

Then open Setup in the Dashboard and choose your source. Under Tracker, select your platform and 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 default), the script collects:

Scroll milestones reset with each new tracked page view. Scrolling inside a nested container is not measured as page scrolling. Pages without a scrollable area produce no depth milestones.

Links within the current site's domain and its subdomains are internal. For other domains that belong to your journey, configure Internal domains for the source. Internal clicks are excluded from stored outbound events. Links such as mailto: and tel: are not tracked.

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.

Send form submissions, purchases, and other business events explicitly. Avoid adding separate tags for the same automatically collected interactions, which can duplicate events.

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.

Scroll the page and activate an external link, then check Engagement → Events for scroll, scroll_depth, and outbound_click. A collection request can contain internal link candidates that are filtered before storage; check the Events report to confirm stored outbound clicks.

Then open Onboarding in the Dashboard and use Check incoming data for the source to confirm browser events are arriving.