Skip to main content
Skip table of contents

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:

    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

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 ( ). 

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.

        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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.