Form Submit, Click and Other Actions
States (JENTIS States Framework ) are a customization option on your JENTIS Tag Manager to create a very individual configuration. Those users of you that fear not a bit of complexity will find here a guide on how to activate JENTIS server side tracking on events such as certain clicks, scrolls or form submissions.
States and actions
In the JENTIS State concept events have their own technical definition - to create a new state please refer to the linked manual: States
Those providing a connection to any sort of action on a website. Reaching from a users scroll and click interaction up to submission of form data.
Custom state definitions allow for you to define your own JavaScript functions to further leverage the JENTIS data framework. Here we will have a close look on some commonly requested use cases.
Form submission tracking
Forms are a common HTML object to hold data that is to be submitted to a server side evaluation. Connecting tracking to such interactions is almost as common. So the following custom state will make sure to give you a signal to work with in your JENTIS server side configuration.
Update notification
The following section was updated to accommodate different options to track actions such as clicks, form submit and other.
With JENTIS we provide two ways to track all those events we introduced you with in this article.
Create a new trigger and select “SELECTORACTION” State to use an easy solution
Customize your configuration that works exactly with your website with custom code
Before we delve deeper into the custom solution, let’s see if the native UI solution is sufficient.
The UI offers a custom option “SELECTORACTION” that provides two additional input fields: Action and CSS Selector.
With this option you can simply submit a form-id or -class with the Action “Submit”. This will trigger and result in the same as with the following code option. Giving you a more intuitive solution to such requirements.
Hint: You can use the CSS Selector value * to activate with ALL elements on that action. In case your CSS selector did not work as intended during preview later, so you possibly can use this wildcard to better debug your websites individual situation.
Custom Solution - Listening to Forms as a JENTIS State
The second option would be the custom code. Giving you more power while it also requires knowledge in JavaScript coding.
Let's create a new state with the following JavaScript code and walk it through line by line.
In this example we will add the form validity function check, so the form submit only activates with valid forms. The validity function used is the generic JS “checkValidity()” form service that will work accordingly if your website follows the HTML validity rules (see here for more details if this applies to your individual website, as not all websites might support this).
Override the first code line “true” value to “false”, if you don’t want to check for form validity.
const CHECK_VALIDITY = true;
function(initState) {
var FORMID = "my-form-id"; //CSS ID VALUE OF HTML <FORM> OBJECT
var form = document.querySelectorAll("#"+FORMID)[0];
if(form && typeof form.addEventListener === "function")
form.addEventListener('submit', (event) => {
if ((CHECK_VALIDITY && form.checkValidity() ) ||
!CHECK_VALIDITY) {
initState();
}
});
}In the case of forms we can look for a certain form on a website by a unique CSS ID value. That is the attribute "id" as in: <from id="42"> - the ID of our form is "42".
As we now have the right object at hand we add an event listener to it. Which waits for the "submit" event to be triggered, details on this standard browser event you will find on MDN: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit
When a form is submitted the browser will forward this information and our code will activate. Calling the "initState" function. Which is an internal mechanism activating JENTIS to now create a state.
The next steps are that trigger conditions are checked in context of this State and tags will activate accordingly, if the conditions of the triggers are met.
Meaning for your desired configuration that the next steps would be to create a trigger (that is connected to your new state) and tags that activate on that trigger.
⚠️ Please note that if this code (in a JENTIS State) is implemented but no trigger is utilizing this State (by selecting this new State in the triggers configuration) then it will not be active.
Scroll tracking
The scroll tracking is now featured in it’s own article: