Hello @vdevaraj. Excellent question. So I have 2 different ways to handle scroll tracking. One comes from our very own @jason_paddock. It's scoped to DOM ready and will fire a utag.link when the user passes 25%, 50%, 75%, and 100% scrolled. Here is the jQuery version:
try{
//Global variable to keep track of which events we have already fired.
window.scrollTracker = {
"25" : 0,
"50" : 0,
"75" : 0,
"100" : 0
};
jQuery(window).on('scroll', function(){
//Capture the full length of the page
var windowHeight = jQuery(document).height();
//Capture where the top of the page is after scroll
var currentPosition = jQuery(document).scrollTop();
//Capture how many pixels can be viewed by the user
var windowViewingArea = jQuery(window).height();
//Figure out the bottom of what the user has scrolled to
var bottomScrollPosition = currentPosition + windowViewingArea;
//Figure out the rounded percentage of how much was scrolled
var percentScrolled = parseInt((bottomScrollPosition / windowHeight * 100).toFixed(0));
utag.DB('User scrolled '+percentScrolled+'%');
//Store a variable to see if we can post the event
var fireEvent = 0;
//Store which quarter the user scrolled to
var scrollBucket = 0;
if(percentScrolled >= 25 && percentScrolled < 50){
if(scrollTracker["25"] === 0){
fireEvent = 1;
scrollTracker["25"] = 1;
scrollBucket = "25";
}
}else if(percentScrolled >= 50 && percentScrolled < 75){
if(scrollTracker["50"] === 0){
fireEvent = 1;
scrollTracker["50"] = 1;
scrollBucket = "50";
}
}else if(percentScrolled >= 75 && percentScrolled < 100){
if(scrollTracker["75"] === 0){
fireEvent = 1;
scrollTracker["75"] = 1;
scrollBucket = "75";
}
}else if(percentScrolled === 100){
if(scrollTracker["100"] === 0){
fireEvent = 1;
scrollTracker["100"] = 1;
scrollBucket = "100";
}
}
if(fireEvent !== 0){
utag.DB('sending event for '+scrollBucket+' bucket');
utag.link({
event_name: 'user_scroll',
event_category: 'Behavior',
event_action: 'Scroll',
event_label: scrollBucket
});
}
});
}catch(e){
utag.DB('Error with performing the scroll tracker: '+e);
}
And here is the JavaScript version:
if (!window.addEvent) {
window.addEvent = function (element, evnt, funct) {
try{
if (element.attachEvent) {
return element.attachEvent('on' + evnt, funct);
}
return element.addEventListener(evnt, funct, false);
}catch(e){
try{
console.log('addEvent failed: '+e);
}catch(e){}
}
};
}
try{
utag.ut.scrollTracker = {
1: false,
2: false,
3: false,
4: false
};
addEvent(window, 'scroll', function () {
var html = document.documentElement;
var body = document.body;
var viewPort = {
yScroll: window.pageYOffset || (html && html.scrollTop) || body.scrollTop,
hScroll: document.compatMode === 'CSS1Compat' ? html.clientHeight || window.innerHeight || 0 : body.clientHeight || 0
},
windowHeight = Math.max(body.scrollHeight, html.scrollHeight, body.offsetHeight, html.offsetHeight, body.clientHeight, html.clientHeight),
quartile = Number(((viewPort.hScroll + viewPort.yScroll) / windowHeight * 4)).toFixed(0);
for(var key in utag.ut.scrollTracker){
if (key <= quartile && !utag.ut.scrollTracker[key]) {
utag.link({
"event_name" : "user_scroll",
"event_category" : "Behavior",
"event_action" : "Scroll",
"event_label": key * 25,
});
utag.ut.scrollTracker[key] = true;
}
}
});
}catch(e){
utag.DB('Error with performing the scroll tracker: '+e);
}
There is also this solution from our amazing @stuart_roskelle:
http://blog.stuartrosk.com/index.php?controller=post&action=view&id_post=8
Now, in order to get an accurate percentage, you actually have to listen to the scroll event on the page and track the percentage, and only report it once per milestone (complete percent page viewed is typically done by setting a cookie with the scroll, then retrieving it on the next page). In the case of this plugin, it puts the percentage into buckets, then sends events when those buckets are reached.
I hope this helps @vdevaraj. Let us know if it does not.
Remember to give me a kudo if you like my post! Accepting my post as a solution is even better! Also remember that search is your friend.
Expand/CollapseMenu
pascalreder
