Auto-Tracking

The Web SDK automatically captures common interactions without manual track() calls. Review what’s captured before enabling in production — especially in regulated industries.

Trackers

Tracker	Event	Captured data
Page views	`page_view`	`$url`, `$referrer`, `$title`
Clicks	`click`	Element tag, text, href, CSS selector
Scroll	`scroll`	Scroll depth milestones (25%, 50%, 75%, 100%)
Forms	`form_submit`, `form_field`	Form ID, field name, interaction type
Frustration	`rage_click`, `dead_click`	Target element, click count, response time

All auto-tracked events include the standard auto-properties ($url, $screen, UTM params, etc.).

Default configuration

Auto-trackers are enabled by default. Disable all or selectively:


init('PROJECT_ID', {
  apiKey: 'KEY',
  autoTrack: {
    pageView: true,
    click: true,
    scroll: false,       // disable scroll depth
    form: true,
    frustration: true
  }
})

Disable everything for manual-only tracking:


init('PROJECT_ID', {
  apiKey: 'KEY',
  autoTrack: {
    pageView: false,
    click: false,
    scroll: false,
    form: false,
    frustration: false
  }
})

Page view tracking

Auto page views fire on:

Initial page load
SPA route changes (via History API pushState / replaceState)
Browser back/forward navigation (popstate)

SPA routing

Auto-trackers hook into the History API. Call init() before your router mounts:


init('PROJECT_ID', { apiKey: 'KEY' })  // must run first
// then mount React Router, Next.js, Vue Router, etc.

If you track page views manually (e.g. in a Next.js usePathname effect), disable the built-in tracker to avoid duplicates:


init('PROJECT_ID', {
  apiKey: 'KEY',
  autoTrack: { pageView: false, click: true, scroll: true, form: true, frustration: true }
})

Click tracking

Captures clicks on interactive elements:


{
  "name": "click",
  "properties": {
    "tag": "button",
    "text": "Sign up",
    "href": "/signup",
    "selector": "button.cta-primary"
  }
}

Useful for understanding which CTAs drive conversion without instrumenting every button manually.

Scroll tracking

Fires once per milestone per page:


scroll (depth: 25%)  → user scrolled 25% of page
scroll (depth: 50%)  → user scrolled 50% of page
scroll (depth: 75%)
scroll (depth: 100%)

Disable on long-form content pages if volume is a concern — four events per page per user adds up.

Form tracking

Event	Trigger
`form_field`	Field focus, blur, change
`form_submit`	Form submission

Captured properties: form ID/name, field name, field type. Password field values are never captured — only interaction events.

Frustration signals

Event	Trigger
`rage_click`	3+ clicks on the same element within 1 second with no DOM change
`dead_click`	Click on a non-interactive element that looks clickable

Useful for UX debugging — rage clicks on a “Submit” button that isn’t working show up in Insights without custom instrumentation.

Privacy considerations

Auto-tracking captures page URLs, element text, and form field names. Before enabling in production:

Review captured properties against your privacy policy
Disable form tracking if field names contain sensitive labels
Disable click tracking if element text contains PII
Add a consent banner and init the SDK only after consent (GDPR/CCPA)
Use samplingRate to reduce volume on high-traffic pages


// Init only after user consent
function onConsentGranted() {
  init('PROJECT_ID', { apiKey: 'KEY' })
}

Common issues

Symptom	Fix
Double `page_view` events	Disable auto page view if tracking manually
No page views on SPA navigation	Confirm init runs before router; check History API hooks
High event volume	Disable scroll tracker; lower `samplingRate`
Form events on sensitive forms	Disable form tracker or exclude specific forms