Data attributes
Declarative tracking with data-signals-* markup.
Annotate your HTML and the tag does the rest - no JavaScript required.
Script-tag attributes
Covered in the script-tag guide: data-signals-key,
data-signals-host, data-autocapture, data-pageview, data-no-init.
Element attributes
| Attribute | Effect |
|---|---|
data-signals-event="name" | Clicking (or submitting, for forms; or changing, for inputs) this element - or any child - fires the named event |
data-signals-no-capture | Excludes this element and its whole subtree from tracking and auto-discovery |
data-signals-form="name" | Names a form for form_abandoned tracking (typed into but never submitted) |
data-signals-section="name" | Fires the named event (default section_viewed) when 30% of the element scrolls into view, once per page load |
data-signals-product-id="…" | Fires product_viewed when 50% visible, once per page load |
data-signals-stock="out_of_stock" | Reports non-in_stock statuses as stock_status_displayed |
data-signals-not-found | Marks a custom 404 page for page_not_found |
Property attributes
Any other data-signals-* attribute on the event element becomes an event property
(dashes → underscores, "true"/"false"/numbers coerced):
<button
data-signals-event="product_added_to_cart"
data-signals-product-id="sku-123"
data-signals-product-price="49.99"
data-signals-currency="USD"
>
Add to cart
</button>fires product_added_to_cart with
{ product_id: "sku-123", product_price: 49.99, currency: "USD" }.
Inheritance
Standard commerce keys - product-id, product-name, product-price, variant-id,
quantity, total, currency, order-id, search-query, section and friends - are
also inherited from up to 4 ancestor levels. Put shared properties on the product
card once; every tracked child element picks them up.