From 6f4ed74db6ab1c241227c6ae6f2a920255dddc55 Mon Sep 17 00:00:00 2001 From: gyss Date: Thu, 23 Jan 2025 08:07:49 +0000 Subject: [PATCH] feat: add a new opt to component-view to be able to configure the IntersectionObserver threshold --- libraries/o-tracking/README.md | 1 + libraries/o-tracking/src/javascript/events/component-view.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/libraries/o-tracking/README.md b/libraries/o-tracking/README.md index 990ddc0d75..0d6bc70b7b 100644 --- a/libraries/o-tracking/README.md +++ b/libraries/o-tracking/README.md @@ -182,6 +182,7 @@ To track when an element has come into view of the user, add the attribute `data - To track different elements, set the `selector` option property to a CSS selector. - Like click events, view events will also track the path from the root of the DOM tree to the element which triggered the tracking event into a property called `domPathTokens`. - To categorise the view events, set the `category` option property. +- To customise the how much of this element needs to be in the viewport to trigger the event, use the `intersectionObserverThreshold` option. This value will be set as the threshold for the IntersectionObserver (it defaults to `1.0`). - To collect extra data to send with the tracking event, add a function named `getContextData` to the options. The function receives as it's single argument the element which triggered the tracking event and needs to return an object with any of these optional properties set: - `componentContentId` - `type` diff --git a/libraries/o-tracking/src/javascript/events/component-view.js b/libraries/o-tracking/src/javascript/events/component-view.js index 9e8e2251f8..30bd4830ea 100644 --- a/libraries/o-tracking/src/javascript/events/component-view.js +++ b/libraries/o-tracking/src/javascript/events/component-view.js @@ -42,7 +42,7 @@ const decorateEventData = (eventData, viewedEl, opts) => { * Listen for view events. * * @alias view#init - * @param {object} opts - To set custom category[String], selector[String], getContextData[Function] + * @param {object} opts - To set custom category[String], selector[String], getContextData[Function], intersectionObserverThreshold[Any] * @returns {undefined} */ const init = (opts = {}) => { @@ -75,7 +75,7 @@ const init = (opts = {}) => { }); } - const observer = new IntersectionObserver(onChange, { threshold: [ 1.0 ] }); + const observer = new IntersectionObserver(onChange, { threshold: opts.intersectionObserverThreshold || [ 1.0 ] }); elementsToTrack.forEach(el => observer.observe(el)); };