JENTIS Click Trigger Details - Selectoraction

In JENTIS you have a convenient trigger option that activates with clicks or any other CSS actions (scroll, form submit, etc). Enriching your options to track user interactions with our website. In this guide we will describe technical details of this special trigger option and how to work around some edge cases you might observe during your configuration.

Background and Basics of Click Tracking in JENTIS

To find the general steps to implement a click trigger please follow this general guide: Triggers.

For a more sophisticated approach around individual use cases such as form submit and click triggers please read on here: Form Submit, Click and Other Actions

And lastly here is a general guide on click-attributes (variables): Clicktracking Variables

In this guide further we will focus on some specifics around those “SELECTORACTION” (or in more short form “click triggers”) and some technical details around them.

Selectoraction-Trigger Data Transmission

Due to the nature of click (and other action) related events it is important to transmit the event as fast as possible. As the luring “unload” event that closes the current website to load the next page or close the tab or window altogether creates a challenge for tracking. If a user clicks and navigates thus to the next page the click-event observation might fail, as the data can not be transmitted in time before the current website is shut down.

For this challenge JENTIS has implemented all triggers that activate with the SELECTORACTION-State to transmit data with a sendBeacon rather than a regular XHR-Request. In short: data can be transported with a lean protocol model (with some limitations) that fits perfectly to the requirement of tracking an event in case of a very short time window to be finished before termination.

However, with this approach some edge cases must also be highlighted. The amount of such events that work with sendBeacon can be limited in users Browsers and Apps. For example, if you create more than 20 trigger of the type “SELECTORACTION” and all of their CSS Selectors are matched at the same time, then 20 sendBeacon requests are fired at once. Which some browsers will limit as they might have a maximum capacity to send such “fast lane” sendBeacon requests at the same time.

To circumvent this scenario of many trigger CSS Selectors activating at the same time please define your CSS Selectors as specific as possible and do not make use of a selector that only defines *(Wildcard) and activates on all clicks (or other actions). Or at least consider to only define a very limited amount of such wildcard click triggers.

CSS Selector Definition Details

The CSS Selector input of the click trigger is the heart of such element. Where the CSS Selectors in general is a broad concept in HTML and Website design (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors ) you can utilize it in your configuration to enhance and specify the exact element and action you want to observe in your Tag Management.

Additionally to the basics of CSS Selector design you must make sure that your website is not interfering with the general concept of event-bubbling (https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling ) as JENTIS will apply the SELECTORACTION based triggers on the body of the HTML document. Meaning, if your website intercepts the event chain (“bubbling”) to the top, then the general click tracking will not work.

Further during definition of your CSS Selector our SELECTORACTION trigger will make use of the “closest” definition between the actually clicked element and matching to your CSS Selector definition. For example if you look for a click on an element construct that is a <div class=”a”> that also includes multiple child elements (ie. a button and a span and an icon) then the CSS Selector .a (class == “a”) will match any of those embedded child elements of that div (parent).

Which gives you more flexibility and ease to define the right CSS selector without selecting the parent and all children individually.

Conclusion

We hope this technical guide provides some insights into the ver technical tidbits of the click triggers in JENTIS.