Data attributes
Everything below works without JavaScript calls – useful in CMSs and page builders (Webflow custom attributes, WordPress blocks).
| Attribute | On | Effect |
|---|---|---|
data-x3-event="name" | any clickable element | Click sends the custom event name |
data-x3-prop-<key>="value" | same element | Adds prop <key> to that event (identifier rules apply) |
data-x3-cta | links, buttons | Click also sends cta_click {label, section} |
data-x3-label="…" | any element | Click label override (otherwise: stable id, aria-label, visible text) |
data-x3-section="name" | any block | Names a section for section reach and click context |
data-x3-ignore | any block | No click labels are captured inside (sensitive areas) |
data-x3-video="id" | <video> or a wrapper | Tracks the video under this id (also without controls) |
data-x3-video-format="landscape|portrait" | same | Overrides the detected format |
data-x3-form="name" | <form> | Form name for form_start/form_submit/form_abandon |
data-x3-404 | any element on a not-found page | The page is reported as /404 and CTA detection is off |
<section data-x3-section="pricing">
<a href="/signup" data-x3-cta data-x3-label="Start trial">Start your free trial</a>
<button data-x3-event="pricing_toggle" data-x3-prop-period="yearly">Yearly</button>
</section>
<form data-x3-form="newsletter">…</form>
<video src="/media/product-tour.mp4" data-x3-video="product-tour" playsinline muted></video>Click labels
Labels are captured only for links, buttons, summary and elements with a button/link role, and
are cleaned: whitespace collapsed, at most 80 characters, anything that looks like an e-mail address,
phone number or generated React id is dropped. Form fields never get a label. Inside
[data-x3-ignore], contentEditable regions and on personal pages no labels are captured at all.
Legacy attributes
Projects with tracking.legacyTrackAttributes = true (the CPI preset) also read the cpi-website2
markup: data-track, data-track-cta, data-track-section, data-track-ignore,
data-track-video, data-track-video-format, data-track-404.
CTA selectors
Besides data-x3-cta, the tracking config can list CSS selectors whose matches count as CTAs
(tracking.cta.selectors, e.g. .btn-primary, a[href$="#contact"]) – handy when you cannot
change the markup.