Click Tracking not executed - Further Troubleshooting

Another common issue with click and other action tracking (via JENTIS trigger "SELECTORACTION", see details here: Event & Interaction Tracking) is when the CSS selector seems not to get to work. Whenever you preview your click-interaction in the console and preview nothing pops up. Just like JENTIS is ignoring the click. Why is that?

HTML and DOM can be a grueling topic, and web applications sometimes interfere with each other or run into conflicts. This is sometimes the case when listening to click (and other) events propagated in the DOM of a page. Generally, the click-trigger in JENTIS will use the Event Bubbling principle to listen for relevant events (find a good introduction to this topic here: https://www.freecodecamp.org/news/event-bubbling-in-javascript/ ). However, when another web app stops the bubbling the event propagation (via stopPropagation() function call) no information will arrive at the body of the website. And JENTIS will never receive any information of a click.

Unfortunately, this situation is very tricky to further investigate or help with, as it always depends on individual implementations and website frameworks used. Hence, we can not provide any further tips to mitigate such conflicts.

However, you can approach your website frontend developers and check with them if any element in their app will stop the event propagation. If so, you have found the root cause and can possibly solve it there.

You can observe the situation on your site with the following two tests.

If the click listener is implemented on the document level:

document.addEventListener('click', function(event) {
    // This function will check if the event target or any of its parents
    // match the given selector.
    function matchSelector(target, selector) {
        // Loop through the parent nodes until the document is reached.
        while (target && target !== document) {
            // Check if the current target matches the selector.
            if (target.matches(selector)) {
                return target;
            }
            // Move up in the DOM tree.
            target = target.parentNode;
        }
        return null;
    }

    // The selector for your specific element
    var selector = 'a[href*="Rent-a-Truck"]';

    // Check if the clicked element or any of its parents match the selector.
    var match = matchSelector(event.target, selector);

    if (match) {
        // Call your function here.
        console.log('Link with "Rent-a-Truck" in href clicked.');
        // You can replace this log with your function to be executed.
    }
});

This will not execute the console log message.

However, the same CSS selector when appended to the specific node will execute:

document.querySelectorAll('a[href*="Rent-a-Truck"]')[0].
addEventListener("click", x=>{
  console.log('Link with "Rent-a-Truck" in href clicked.');
});

Unfortunately, there is no option on our end to change the situation.

You can do the following:

• make sure the website is not breaking the event propagation as mentioned in the articles above

• OR implement the click-tracking in a custom code in JENTIS (with appending the click event listener to the node directly and submit a _jts.push() with an event to activate tracking with your tag manager) as a workaround