docbrown/app/javascript/utilities/ahoy/trackEvents.jsx
Ridhwana b6b9087bfb
Refactor: no need to pass through the ahoy event name dynamically. (#18498)
* refactor: the name does not need to be passed through dynamically

* refactor: the name does not need to be passed through dynamically

* chore: remove name from the js doc
2022-09-28 19:21:38 +02:00

48 lines
1.5 KiB
JavaScript

import ahoy from 'ahoy.js';
// * Create an ahoy event that will track a click on the
// * passed in element.
// *
// * @param {string} elementId A unique identifier to identify the element that is being tracked
// */
export function trackCommentClicks(elementId) {
document
.getElementById(elementId)
?.addEventListener('click', ({ target }) => {
const relevantNode = getTrackingNode(target, '[data-tracking-name]');
if (relevantNode) {
ahoy.track('Comment section click', {
page: location.href,
element: relevantNode.dataset?.trackingName,
});
}
});
}
// * Create an ahoy event that will track a click on the
// * passed in element.
// *
// * @param {string} elementId A unique identifier to identify the element that is being tracked
// */
export function trackCreateAccountClicks(elementId) {
document
.getElementById(elementId)
?.addEventListener('click', ({ target }) => {
const relevantNode = getTrackingNode(target, '[data-tracking-id]');
if (relevantNode) {
ahoy.track('Clicked on Create Account', {
version: 0.1,
page: location.href,
source: relevantNode.dataset?.trackingSource,
});
}
});
}
function getTrackingNode(target, trackingElement) {
// We check for any parent container with a trackingElement attribute, as otherwise
// SVGs inside buttons can cause events to be missed
const relevantNode = target.closest(trackingElement);
return relevantNode;
}