Locallytics Grabber

<LocallyticsGrabber /> is a client component that automatically tracks pageviews. Drop it in your layout and forget about it.

Usage

Add it to your root layout:

app/layout.tsx

import { LocallyticsGrabber } from "locallytics";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body>
        {children}
        <LocallyticsGrabber />
      </body>
    </html>
  );
}

The component renders nothing visible.

Props

Prop	Type	Default	Description
`endpoint`	`string`	`"/api/analytics"`	Your API route path

Custom Endpoint

<LocallyticsGrabber endpoint="/api/my-analytics" />

How It Works

Mount — Component mounts when user visits your site
Session ID — Generates a UUID and stores it in localStorage
Track — Sends pageview data to your API endpoint
Navigate — Automatically tracks client-side navigation

Data Collected

Each pageview includes:

pageUrl — Current path (e.g., /about)
referrer — Where the user came from
sessionId — Anonymous identifier
screenWidth / screenHeight — Viewport size
userAgent — Browser info (truncated to 512 chars)
timestamp — ISO 8601 timestamp

Privacy

No Cookies

Uses localStorage only for a persistent session ID. No cookies are set.

Do Not Track

The tracker respects browser privacy settings:

navigator.doNotTrack
window.doNotTrack
Global Privacy Control (GPC)

When any of these are enabled, tracking is completely disabled. No data is collected or sent.

Conditional Rendering

Disable tracking for specific users (e.g., admins):

{
  !isAdmin && <LocallyticsGrabber />;
}

No PII

By default, no IP addresses or fingerprinting data is collected. The session ID is anonymous and cannot identify a real person.

Locallytics Grabber

On this page