Data attributes Pro

Wire up click tracking directly from HTML — no JavaScript required. Mark any element with data-clamp-eventand Clamp captures clicks on it as a custom event. Ideal for marketing pages, CMS-driven content, A/B test variants, and anywhere a developer isn’t on standby.

Enable

init

init("proj_xxx", { extensions: { dataAttributes: true } })

// or, in React:
<Analytics projectId="proj_xxx" extensions={{ dataAttributes: true }} />

How it works

A single delegated click listener is attached to document. When a click happens, Clamp walks up the DOM from the click target and looks for the nearest ancestor with a data-clamp-event attribute. If found, it fires track(eventName, props).

data-clamp-event="name" sets the event name. Required.
Every other data-clamp-* attribute on the same element becomes a property. The data-clamp- prefix is stripped, dashes become underscores.
data-clamp-money-key="amount currency" becomes a Money property. Example: data-clamp-money-total="29.00 USD".
Clicks on child elements still work. <button data-clamp-event="cta"> fires even when the user clicks the icon inside it.

Examples

Simple click

<button data-clamp-event="signup_click">Get started</button>
// → track("signup_click")

With properties

<a
  href="/pricing"
  data-clamp-event="pricing_view"
  data-clamp-source="hero"
  data-clamp-variant="control"
>
  See pricing
</a>
// → track("pricing_view", { source: "hero", variant: "control" })

With Money

<button
  data-clamp-event="checkout_clicked"
  data-clamp-plan="pro"
  data-clamp-money-price="29.00 USD"
>
  Start on Pro — $29/mo
</button>
// → track("checkout_clicked", {
//     plan: "pro",
//     price: { amount: 29, currency: "USD" }
//   })

Wrapping a complex element

<button data-clamp-event="cta_click" data-clamp-location="nav">
  <svg>...</svg>
  <span>Start free</span>
</button>
// Clicks on the svg or span both fire the event — Clamp walks up to the button.

When to use this vs `track()`

Use data attributesfor static markup, CMS content, A/B test variants, and any moment when the person making the change isn’t a developer.
Use track() when the event depends on runtime state (form submission outcome, derived values, async results) or when you want type safety via typed events.

Gotchas

Malformed money values are silently skipped. The format is strict: "<amount> <3-letter-currency>" with a single space.
Property keys are derived from the attribute name — dashes in attribute names become underscores in property names. Plan your attribute names with that in mind.
Every click is a custom event that counts against your monthly quota. Be intentional about what you tag, especially on pages with many clickable elements.
Right-click, middle-click, and keyboard activation on a focused element all dispatch click events and will fire the tracker. This is usually what you want, but worth knowing.

track() — programmatic equivalent, for runtime-dependent events.
Revenue — how Money values flow through properties.
Outbound links — automatic (no markup) equivalent for external-link clicks.