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.
![image-1675765206294.png](../__attachments/1021149247/image-1675765206294.png?inst-v=f24ed5ce-e1b7-4905-8527-03c7e7fd345b)
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:
![](../__attachments/1021149247/Eingefu%CC%88gtes_Bild_07_02_23__11_21.jpg?inst-v=f24ed5ce-e1b7-4905-8527-03c7e7fd345b)
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.