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.
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:
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) => {
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 Step 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.
Scroll tracking
The scroll tracking is now featured in it’s own article: