Auto-capture

The tag fires structured events when it encounters elements marked with data-p-* attributes. You only need to mark the elements you already have — no JS changes required. The tag walks up to 4 ancestors to inherit context, so a single set of attributes on a parent card flows through to all its children.

Mark a product card

<div
  data-p-product-id="123"
  data-p-product-name="Linen Shirt"
  data-p-product-price="49"
  data-p-position="0"
>
  <a href="/products/linen-shirt">…</a>
</div>

Fires product_viewed when the card is at least 50% visible in the viewport. The position becomes part of the event properties — useful for measuring CTR on grid positions.

Trigger an event on click

<button data-p-event="add_to_cart" data-p-quantity="1">
  Add to cart
</button>

When a parent has data-p-product-id etc., those properties are inherited automatically:

<div data-p-product-id="123" data-p-product-name="Linen Shirt">
  <button data-p-event="add_to_cart" data-p-quantity="1">Add to cart</button>
</div>

The resulting add_to_cart event carries product_id: 123, product_name: "Linen Shirt", quantity: 1.

Form submit

<form data-p-event="search">
  <input name="q" />
  <button type="submit">Search</button>
</form>

search_query is auto-extracted from inputs named q, query, or search. Other named inputs are not auto-extracted — to send their values, set them as data-p-* attributes.

Stock display

<div
  data-p-stock="out_of_stock"
  data-p-product-id="123"
>
  Out of stock
</div>

Fires stock_status_displayed once per element. Mutations on data-p-stock are tracked, so toggling between in_stock / low_stock / out_of_stock re-fires the event.

Form abandonment

<form data-p-form="address">…</form>

If the user types in the form then leaves the page (or unmounts the form) without submitting, form_abandoned fires with form: "address".

Opt out a region

Wrap any subtree with data-p-no-capture="true" to silence auto-capture for everything inside it. Useful for admin / debug widgets you don't want feeding analytics.

<div data-p-no-capture="true">
  <!-- nothing in here will be auto-captured -->
</div>

All data-p-* attributes

Attribute	Type	Notes
data-p-event	event name	Required to make an element a click target.
data-p-product-id, data-p-product-name, data-p-product-slug, data-p-product-price, data-p-product-category	string / number	Inherited by descendants up to 4 levels.
data-p-position	number	Index within a list — pair with data-p-product-id.
data-p-variant-id, data-p-quantity	string / number	Add-to-cart context.
data-p-section	event name	Mark a section to fire when it scrolls into view.
data-p-stock	in_stock, low_stock, out_of_stock	Fires stock_status_displayed.
data-p-form	string	Tag a form for form_abandoned tracking.
data-p-no-capture	true	Silence auto-capture for the subtree.
data-p-not-found	any	Marks a 404 / not-found page.

Any other data-p-<name> attributes you set are passed through to the event as <name> (with - converted to _).