Form Submit, Click and Other Actions

States 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 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, from a user's scroll and click interaction to submission of form data.

Custom state definitions allow you to define your own JavaScript functions to further leverage the JENTIS data framework. Here, we will examine some commonly requested use cases.

Form submission tracking

Forms are a common HTML object that holds data to be submitted to a server-side evaluation. Connecting tracking to such interactions is almost as common. So, the following custom state will give you a signal to work within 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 to in this article.

1. Create a new trigger and select “SELECTORACTION” State to use an easy solution.

2. 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,” which 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.

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, you can use this wildcard to better debug your website's 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 particular 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 proper 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 forwards this information, and our code activates, calling the "initState" function. This function is an internal mechanism activating JENTIS to create a state.

The next steps are to check trigger conditions in the context of this State, and if the conditions of the triggers are met, tags will activate accordingly.

For your desired configuration, the next steps would be to create a trigger (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.