Autocapture

Automatically capture clicks, form submissions, and input changes without manual instrumentation. Privacy-first by default — sensitive data is filtered and cookie consent banners are excluded from capture.

#Enable autocapture

Pass autocapture: true (or an AutocaptureConfig object) to vt.init to opt in. If you don't pass the option, autocapture is controlled by the Analytics → Autocapture toggle in your project settings — the SDK fetches that on boot via /decide and starts listening once it resolves.

vt.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://www.vtilt.com',
  autocapture: true,
})

You can also start and stop autocapture programmatically at any time:

vt.startAutocapture() // takes precedence over the dashboard toggle
vt.stopAutocapture() // disables capture for the rest of the session
vt.isAutocaptureActive() // → boolean

#Debugging "no $autocapture events"

If pageviews are flowing but $autocapture events are missing, call vt.getAutocaptureDiagnostics() from the browser console. It returns a structured snapshot of the enabled state, the inputs that drove the decision, and a disabledReason so you can see at a glance why nothing is being captured (waiting on /decide, dashboard toggle off, server opt-out, or vt.stopAutocapture() was called).

vt.getAutocaptureDiagnostics()
// → {
//     isEnabled: false,
//     isStarted: false,
//     disabledReason: 'config_autocapture_undefined',
//     inputs: { configAutocapture: undefined, isDisabledServerSide: false, ... }
//   }

For richer logs, pass log_level: 'info' to vt.init — the SDK emits [vTilt]:autocapture lifecycle messages (started, stopped, disabled reason) on every config change.

Why is this specific element not captured?

When clicks are coming through but a particular button or link still doesn't fire $autocapture, set log_level: 'debug' and reproduce the click. The SDK prints a one-line trace per skipped event with the rule that rejected it:

[vTilt]:autocapture skip css_selector_ignorelist_hit { tag: "button", text: "Continue", target }
[vTilt]:autocapture skip vt-no-capture class on element chain { target }
[vTilt]:autocapture skip synthetic event (isTrusted=false) { type: "click", target }
[vTilt]:autocapture captured $autocapture { tag: "BUTTON", text: "Sign up", href: "/signup" }

The reason at the end of every skip line is one of:

Combine that with the existing vt-no-capture and vt-sensitive skip lines to fully account for every click that doesn't make it onto the wire.

#Events captured

$pageleave can include $prev_pageview_scroll_depth_pct when autocapture.scroll_depth.pageleave is enabled (requires capture_pageleave).

#Scroll depth

Two independently opt-in modes under autocapture.scroll_depth (both default off):

// Milestones only — funnel-friendly
vt.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://www.vtilt.com',
  autocapture: { scroll_depth: { milestones: true } },
})

// Page-leave summary only — lower volume
vt.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://www.vtilt.com',
  autocapture: { scroll_depth: { pageleave: true } },
  capture_pageleave: true,
})

A passive scroll listener runs when either mode is on. State resets on each $pageview (including SPA navigations). Milestone events respect url_allowlist and url_ignorelist like other autocapture.

#Properties collected

#Advanced configuration

Pass an object to autocapture for fine-grained control over which pages, elements, and events are captured.

vt.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://www.vtilt.com',
  autocapture: {
    url_allowlist: ['https://example.com/app/.*'],
    url_ignorelist: ['https://example.com/admin/.*'],
    dom_event_allowlist: ['click', 'submit'],
    element_allowlist: ['a', 'button', 'form'],
    css_selector_allowlist: ['[data-track]', '.trackable'],
    css_selector_ignorelist: ['[data-no-track]', '#admin-panel'],
    element_attribute_ignorelist: ['data-secret', 'aria-label'],
    capture_copied_text: true,
    capture_element_values: true,
  },
})

#Privacy controls

Use CSS classes to control what gets captured. Privacy protections apply automatically — password fields, sensitive names (cc, ssn, etc.), and credit card / SSN patterns in values are never captured.

<!-- Prevent autocapture on this element and its children -->
<div class="vt-no-capture">
  <button>This click will NOT be captured</button>
</div>

<!-- Mark element as containing sensitive data -->
<div class="vt-sensitive">
  <input type="text" placeholder="SSN" />
</div>

<!-- Force capture on a specific element -->
<span class="vt-include">This text WILL be captured</span>

#Custom properties

Attach custom key-value properties to autocapture events using data-vt-capture-attribute-* HTML attributes.

<button
  data-vt-capture-attribute-feature="signup"
  data-vt-capture-attribute-variant="blue"
>
  Sign Up
</button>

<!-- The autocapture event will include:
  { feature: "signup", variant: "blue", ...standard props } -->

#Rage click detection

Detect frustrated users clicking repeatedly in the same area. Fires a separate $rageclick event.

vt.init('YOUR_PROJECT_TOKEN', {
  api_host: 'https://www.vtilt.com',
  autocapture: true,
  rageclick: true,
})

// When a user clicks 3+ times within 30px
// in under 1 second, a $rageclick event fires.