Visibility tracking

Overview

Source: ./src/documentation/development/visibility-tracking.mdx

Visibility tracking is essential for understanding user interactions and optimizing the performance of web components. If you need to track the visibility state of a component itself, you can use this internal module for attribute driven tracking that provides a mechanism to track the visibility state for any DOM element.

Configure visibility tracking for a component

In this example, the oc-cinema-v1 element is configured with the data-tr-v1-become-visible.observer attribute, which specifies the threshold for the visibility state. When the element becomes 86% visible within the document, the data-tr-v1-become-visible event is triggered, and the data-tr-v1-become-visible.updates attribute is invoked with the specified payload.

<oc-cinema-v1
  data-tr-v1
  data-tr-v1-tr-become-visible.observer='{ "threshold": 0.86 }'
  data-tr-v1-tr-become-visible.updates='[{ "featureId": "foo-barid", "status": "works", "action": "scroll" }]'
>
  ...slide items...
</oc-cinema-v1>

Default tracking behavior

The default behavior of the tracking process is to invoke the submitMiniAction function of the internal tracking library with the payload specified in the data-tr-v1-tr-become-visible.updates attribute:

[{
  featureId: "foo-barid",
  status: "works",
  action: "scroll"
}]

The default behavior can be overridden via options.

Custom tracking logic

If you need to implement custom tracking logic, you can listen for the tr-submit-tracking event. This allows you to stop the event and implement your own tracking logic.

myCinema.addEventListener("tr-submit-tracking", (ev) => {
  ev.preventDefault();

  // ...custom logic
  const items = ev.currentTarget.visibleItems;
});