Scroll Tracking State

A websites and business intelligence requires often detailed analysis of how a user interacted with the content provided. This is where tracking of progress in the content consumption comes into play.

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.

To implement this requirement in your individual JENTIS Data Capturing Platform configuration, 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 JENTIS 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 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.