HTML Element view tracking

HTML element view tracking allows you to track whether the user has viewed defined elements on your website. Adding elements for tracking is simple. You can easily add an element for tracking in conjunction with our Web Auto-Collector or by itself.

Note: This feature only works with browsers that support Intersection Observer.

Automated Event Tracking

All HTML elements with a class .track-element-view will be detected by the browser. An event will be recorded anytime an element appears on the user’s screen. The event will contain specific attributes from the visible element and will be nested under the element property.

{

  "element": {
      "title": "Track element view",
      "text": null,
      "class": "track-element-view",
      "event_key": null,
      "node_name": "DIV",
      "href": null,
      "x_position": 8,
      "y_position": 830,
      "selector": "body > div:eq(1)",
      "id": null
    }

}

Without Automated Event Tracking

Using this tracker without the Web Auto-Collector gives you more control. For instance, a threshold is used to control the sensitivity of the Observer when the CSS selector for the HTML elements is defined as .track-element-view. Just make sure to include your specific project ID and Write Key in YOUR_KEEN_PROJECT_ID and YOUR_KEEN_WRITE_KEY.

import KeenTracking from 'keen-tracking';

const client = new KeenTracking({
  projectId: 'YOUR_KEEN_PROJECT_ID',
  writeKey: 'YOUR_KEEN_WRITE_KEY'
});
const helpers = KeenTracking.helpers;

if(typeof IntersectionObserver !== 'undefined'){
  const elementViewsOptions = {
    threshold: 1.0,
  }
  const elementViewsCallback = (events, observer) => {
    events.forEach(el => {
      if(el.isIntersecting){
        return client
          .recordEvent({
            collection: 'element_views',
            event: {
              element: helpers.getDomNodeProfile(el.target),
              local_time_full: new Date().toISOString()
           }
        });
      }
    });
  }
  const observer = new IntersectionObserver(elementViewsCallback, elementViewsOptions);
  const target = document.querySelectorAll('.track-element-view');
  target.forEach(el => {
    observer.observe(el);
  });
}