Implement Tracking

Basic implementation

The same event listener pattern works for any Smartfit HTML element.

The listener must be attached to the Smartfit element that emits the callback.

For example, the following product sizing element uses the ID product-sizing:

<sf-product-sizing id="product-sizing"></sf-product-sizing>

The activity event can then be observed as follows:

<!-- Place this script after the Smartfit HTML element -->
<script>
    const sizingWidget = document.querySelector('#product-sizing');

    sizingWidget?.addEventListener('activity', event => {
        console.log('[Smartfit Activity]', event.detail);
    });
</script>

The callback payload is available under:

event.detail

The source and status properties identify the event variant.

sizingWidget?.addEventListener('activity', event => {
    const payload = event.detail;

    console.log('Source:', payload.source);
    console.log('Status:', payload.status);
    console.log('Payload:', payload);
});

Implementation recommendations

• Register the event listener after the Smartfit element exists in the DOM.
• Use a unique selector or ID for every tracked Smartfit element.
• Preserve the original source and status values.
• Add the current shop product and page context separately.
• Apply the shop’s consent and privacy requirements.

For all supported sources, statuses, and payload structures, see the Activity Callback Reference.