Autocapture & data attributes — Docs

With autocapture: true (the default), OakData records interactions without per-element instrumentation. It listens for clicks, form submits, input changes, and copies at the document level, resolves the meaningful target (walking up to the nearest link, button, or element with a role), and attaches a structured descriptor of that element to the event.

What gets captured

Event	Type	Description
`$click`	`auto`	Every click. Includes the element, its ancestor chain, coordinates, and modifier keys.
`$rage_click`	`auto`	Emitted alongside $click when three or more clicks land in the same spot within a second.
`$dead_click`	`auto`	A click that caused no DOM mutation and no navigation within 300ms — a sign of a broken control.
`$outbound_click`	`auto`	A click on an anchor pointing to a different host.
`$form_submit`	`auto`	A form submission, with a summary of each field. Password fields are always excluded.
`$input_change`	`auto`	A change on an input, select, or textarea. The value is masked unless input capture is enabled.
`$copy`	`auto`	Text copied to the clipboard, with the selection length and a short preview.

Values are private by default

Autocapture records element structure (tag, id, classes, text, selector), not what users type. Input values and form field values are masked unless you explicitly enable input capture, and <input type="password"> is never recorded.

Opting elements out: data-oak-ignore

Add data-oak-ignore to any element to exclude it — and everything inside it — from autocapture. Clicks, changes, submits, and copies originating within the subtree are dropped.

ignore.html

html

<!-- Nothing in this region is autocaptured -->
<section data-oak-ignore>
  <button>Internal debug action</button>
</section>

Declarative events: data-oak-event

To turn a click into a named custom event without writing JavaScript, put data-oak-event on (or above) the clickable element. Add data-oak-prop-* attributes to attach properties — the suffix after data-oak-prop- becomes the property name.

declarative.html

html

<button
  data-oak-event="pricing_cta_clicked"
  data-oak-prop-plan="pro"
  data-oak-prop-position="hero"
>
  Get started free
</button>

This fires a pricing_cta_clicked event with { plan: "pro", position: "hero" } — in addition to the normal $click. Property values are always strings (they come from HTML attributes).

Session replay privacy classes

When session replay is enabled, three CSS class names give you declarative control over what the recorder captures. Add them as ordinary classes on the elements you want to protect.

Class	Type	Description
`oak-mask`	`class`	Masks the element's text content in the recording (replaced with blocks), while still capturing its shape and position.
`oak-ignore-input`	`class`	Drops the typed value of an input from the recording. The field is still visible; what was entered is not.
`oak-no-capture`	`class`	Blocks the element and its entire subtree from the recording — it's rendered as an empty placeholder.

replay-privacy.html

html

<!-- Text shown as blocks in replay -->
<p class="oak-mask">Order total: $4,210.00</p>

<!-- Value never recorded -->
<input class="oak-ignore-input" name="ssn" />

<!-- Whole widget blocked from the recording -->
<div class="oak-no-capture">
  <CreditCardForm />
</div>

Inputs are masked by default in replay

Replay masks all input values by default, and passwords are masked even if input masking is turned off. The classes above are for finer-grained control over specific elements. See replay privacy & masking.