It may not be the easiest, but you should be able to come up with a custom solution using JS and session storage values... (if you aren't comfortable with coding, you may want to get a developer from your team to help you).
But in theory, when the page loads, you can get the height of the page with:
window.document.body.clientHeight
*** Important Note: If your developers have done something silly like set the CSS of the body to 100%, this will only get the height of the visible viewport, and then your scroll position will be greater than the "height" of the page resulting in wonky numbers... you may need to find alternate code to get the height of the body.
To get the user's scroll position you can use:
Math.round(window.scrollY)
Now, the user may resize the page at any given time while on your site, so you are going to want to evaluate both values... I would recommend using the scrollend event (rather than scroll.. so that you only evaluate the % completed when the user finishes the scroll rather than every few pixels of the scroll while in progress).
document.addEventListener("scrollend", function(){
var height = window.document.body.clientHeight;
var position = Math.round(window.scrollY);
var percentScrolled = position/height;
percentScrolled = percentScrolled.toFixed(2);
var lastMaxPercent = sessionStorage.getItem("percentScrolled");
if (lastMaxPercent < percentScrolled){
sessionStorage.setItem("percentScrolled", percentScrolled);
}
});
Basically, each time the user scrolls, this will evaluate the height of the page and the user's scroll position and calculate the % scrolled... Then it will check session storage for a lower value (no session storage will be considered "lower") and the value of the session storage will be overwritten with the higher value.
You will also need to store the current page identifier to a session storage value as well.
When a page is loaded, you must read the two session variables first, and extract the values for use in your tracking, then immediately delete BOTH of them or force an overwrite for the current page so that the new scrolling can start to work for this page.
Essentially the rules must go something like this:
- Get Value of Session Variables to Include on the Page View (for previous page)
- Page View Beacon Fired
- Clear / Reset Session Variables so that the new page height and scroll position will start to be evaluated
- Start the new Scroll Tracking code for the new page
This may require some tweaks, as this is just off the top of my head, but essentially this should work for you.
