Last Updated on July 19, 2021 by Shivanandana Hegde
This article demonstrates an easy and effective way to get scroll percentage (scroll depth) at any point of time during page scrolls. For a deep dive content analysis, tracking scroll depth is crucial. Especially when customer-engagement is in the equation, scroll depth reveals content effectiveness.
Below are some scenarios when you would want to consider tracking scroll depth:
- Page consumption metrics. For example: Visitor’s position on page before exiting the site.
- After what point on a page do visitors disengage from content and move to another site-section?
- What is the average scroll depth of heavily engaged visitors?
- At what scroll percentage can I trigger an intervention? etc..
Scroll depth trigger vs Custom get scroll percentage
Interestingly enough, tag management tools have built-in scroll depth triggers. Like GTM for instance has a built in trigger based on scroll depth.
Similarly, even analytics tools have custom triggers based on scroll.
The problem with this however is – it is generally pre-set to certain percentage.
Meaning, you can trigger a tag ‘after’ user reaches 25% of the page or 50%, or 75% etc.
It doesn’t tell you where the user was on a page when they performed a particular action.
For example, what if you want to track ‘at what percentage of page was user in when they clicked certain element?‘.
Simple JavaScript based solution to track scroll depth (get scroll percentage)
Though there might be number of built-in utility functions to get this job done, I prefer custom JavaScript any day. Of course, I use jQuery too.
Pre-requisite for this method to get scroll depth
- You should have jQuery library installed/enabled.
JavaScript function (code block) to get scroll percentage:
var getScrollPercent = function(){
var winHeight = $(window).height();
var docHeight = $(document).height();
var scrollTop = $(window).scrollTop(); //NaN or zero at top
var trackLength = docHeight - winHeight;
var pctScrolled = Math.floor(scrollTop/trackLength * 100);
return pctScrolled;
}Understanding the code: getScrollPercent();
$(window).height(); – This returns a unit-less pixel value of the height of the (browser) window also known as ‘viewport’.
$(document).height(); – This returns an unit-less pixel value of the height of the document being rendered.
$(window).scrollTop(); – Since we need to know current position, this function returns the current vertical position of the scroll bar for the first element in the set of matched elements.
Math.floor(); : Rounding up to nearest least whole number.
How to start tracking scroll depth and use this JavaScript to get scroll depth for analytics?
- Firstly, Define the function as either a global function (to re-use across all tracing tools) or locally (to re-use only within in one analytics tool).
- Now, On an action, call the function getScrollPercent(); – It returns an integer. (see image below).
3. As the final step, Assign this integer to a dimension(or event) depending on your analytics tool. That’s it!
Conclusion
Let me know if you were able to use this successfully and what use case did it serve? 🙂
Our latest post: How to copy custom dimensions to another property (Google Analytics)
You may also like reading: Fire a tag based on pageview count.
