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.
<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:
<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:
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:
<script> window.seerstack.capture("signup.completed", { plan: "pro" }, "user_123");</script>User identification
The snippet stores a browser-scoped user_id in localStorage so you can link
events across sessions. If you already know the user id, call identify() to
persist it and attach it to all future events:
<script> window.seerstack.identify("user_123");</script>Reserved event names
Note
Event names starting with $ are reserved for SeerStack system events.
Avoid using $ prefixes for custom events.