Form Submit, Click and user action States

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 clicks, scrolls or form submissions.

States and actions

In JENTIS States 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.

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

Let's now have a look on a slightly more complex situation. The interaction at hand is now a website where the user scrolls through the content. So on certain thresholds (25%, 50% and 90% content scrolled) we want to activate our tracking, ie. to trigger an event in Google Analytics.

Again, let's create a new State with the following JavaScript code and walk it through line by line:

function(initState){
    var THRESHOLDS = [25, 50, 90]; // SORTED INT VALUES TO ACTIVATE STATES SINGLE TIME PER THRESHOLD VALUE
    document.addEventListener('scroll', function(e) {
        var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';

        var percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;

        if(THRESHOLDS.length > 0 && percent > THRESHOLDS[0]){
            THRESHOLDS.shift(); //remove reached value
          
            initState();
        }
    });
}

In this State definition we first define our thresholds. Once a percentage value is reached a State will activate and this threshold value will be removed (via shift()-call). So if a user scrolls up and down a State is only activated once per threshold value.

In our case we have three threshold values: 25, 50 and 90 percent scrolled.

The event listener is the browser default "scroll" event (https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event). 

Other than that there is the calculation of the scroll percentage based on global defaults like document body.

Now a good idea would be to also have a variable of the current scroll percentage. As we know from the basic State documentation (States) trigger, tags and variables are all evaluated in context of a state. So lets define some further of those values as they will become handy in this scenario.

Scroll Percentage Variable

Let's add a variable "Scroll Percentage" so we can use it as a trigger condition in the next steps.

Navigate to the variable section and add a new item. Here select the "Custom Javascript Variable" template.

The JavaScript in that case would be the same percentage calculation as in the State.

function(){
        var h = document.documentElement, 
        b = document.body,
        st = 'scrollTop',
        sh = 'scrollHeight';

        return (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
}

Now this will return us the scroll percentage value that we can use in triggers and tags.

For example you can go ahead and add a new trigger that is connected to the previously added State:

The highlighted sections are the connection of the trigger to exactly the State from the steps before. Also the variable is now coming into play as we create a condition based on its value.

Further you could now create a tag and activate a data stream. But let's leave it with that - as you probably already have a clear idea on how to use this variable and trigger.