Data attributes
Declarative tracking with data-pixelfox-* markup, and every attribute the script tag understands.
Annotate your HTML and the tag does the rest - no JavaScript required.
Script-tag attributes
These go on the <script> element that loads pixelfox.min.js. Each one has an
equivalent init option for sites that call init
themselves.
| Attribute | Values | Effect |
|---|---|---|
data-pixelfox-key | pfx_live_… | Required. Your site's API key |
data-pixelfox-host | URL | Where events are sent. Defaults to the origin the script was loaded from, so it is only needed when the script and the ingest host differ. See custom ingest endpoint |
data-autocapture | "false" | Turn off clicks, submits, pageviews and form tracking |
data-pageview | "false" | Do not send the initial $pageview |
data-pixelfox-consent-default | "granted" or "denied" | Turn on Google Consent Mode v2 with that default. See Consent Mode |
data-pixelfox-custom-loader | "true" | Serve vendor scripts through your own domain. Turned on automatically once a custom ingest endpoint is saved |
data-pixelfox-engagement | "true" | Load the engagement bundle (scroll depth, time on page, rage clicks, Web Vitals, errors) |
data-no-init | "true" | Do not initialise on load; you call pixelfox.init({...}) yourself |
<script
src="https://t.yourstore.com/pixelfox.min.js"
data-pixelfox-key="pfx_live_…"
data-pixelfox-consent-default="denied"
data-pixelfox-engagement="true"
defer
></script>Element attributes
| Attribute | Effect |
|---|---|
data-pixelfox-event="name" | Clicking (or submitting, for forms; or changing, for inputs) this element - or any child - fires the named event |
data-pixelfox-no-capture | Excludes this element and its whole subtree from tracking and auto-discovery |
data-pixelfox-form="name" | Names a form for form_abandoned tracking (typed into but never submitted) |
data-pixelfox-section="name" | Fires the named event (default section_viewed) when 30% of the element scrolls into view, once per page load |
data-pixelfox-product-id="…" | Fires product_viewed when 50% visible, once per page load |
data-pixelfox-stock="out_of_stock" | Reports non-in_stock statuses as stock_status_displayed |
data-pixelfox-not-found | Marks a custom 404 page for page_not_found |
Property attributes
Any other data-pixelfox-* attribute on the event element becomes an event property
(dashes → underscores, "true"/"false"/numbers coerced):
<button
data-pixelfox-event="product_added_to_cart"
data-pixelfox-product-id="sku-123"
data-pixelfox-product-price="49.99"
data-pixelfox-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.