> ## Documentation Index
> Fetch the complete documentation index at: https://docs.seerstack.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Analytics

> Auto-track pageviews, clicks, and rageclicks from your website.

SeerStack provides a lightweight browser snippet that automatically tracks pageviews, clicks, and rageclicks. Use this for product analytics and UX insights without instrumenting every button.

## Install the snippet

Add the script tag to your site and include your **Publishable Key**.

```html theme={null}
<script
  src="https://app.seerstack.com/web-analytics.js"
  data-key="pk_live_..."
></script>
```

If you want to use a custom API host (self-hosted or staging), add `data-host`:

```html theme={null}
<script
  src="https://app.seerstack.com/web-analytics.js"
  data-key="pk_live_..."
  data-host="https://api.seerstack.com"
></script>
```

## Auto-tracked events

| Event | When it fires | Description |
| :- | :- | :- |
| `$pageview` | On page load (and when you manually call `pageview`) | Captures page navigation context. |
| `$click` | On button and link clicks | Captures element metadata for UX analysis. |
| `$rageclick` | 3+ rapid clicks on the same button or link | Signals user frustration or broken UI. |

## Auto-captured properties

These properties are attached to every event:

| Property | Description |
| :- | :- |
| `$url` | Full page URL |
| `$path` | URL path |
| `$referrer` | Referrer URL |
| `$title` | Page title |
| `$screen_width` | Screen width |
| `$screen_height` | Screen height |
| `$viewport_width` | Browser viewport width |
| `$viewport_height` | Browser viewport height |
| `$language` | Browser language |
| `$user_agent` | Browser user agent |
| `$platform` | Browser platform |
| `$device_type` | Device category (`mobile`, `tablet`, `desktop`) |
| `$os` | Operating system (`ios`, `android`, `windows`, `macos`, `linux`) |
| `$device_vendor` | Device vendor (best-effort) |
| `$country` | Country (server-enriched) |
| `$region` | Region (server-enriched) |
| `$city` | City (server-enriched) |

Click events also include:

| Property | Description |
| :- | :- |
| `$element_tag` | Element tag name |
| `$element_id` | Element id |
| `$element_classes` | Element class list |
| `$element_text` | Element text (trimmed) |
| `$element_href` | Link href (if any) |
| `$element_type` | Input type (if any) |
| `$element_name` | Input name (if any) |
| `$element_role` | ARIA role (if any) |

## Next.js (App Router)

Add the script once in your root layout:

```tsx theme={null}
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Script
          src="https://app.seerstack.com/web-analytics.js"
          data-key={process.env.NEXT_PUBLIC_SEERSTACK_KEY}
          strategy="afterInteractive"
        />
        {children}
      </body>
    </html>
  );
}
```

The snippet automatically tracks client-side route changes for SPA frameworks like Next.js.

## Manual tracking

You can also send your own events from the browser:

```html theme={null}
<script>
  window.seerstack.capture("signup.completed", { plan: "pro" }, "user_123");
</script>
```

## Reserved event names

> [!NOTE]
>
> Event names starting with `$` are reserved for SeerStack system events.
> Avoid using `$` prefixes for custom events.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.