User Experience Event Tracking Code

Here is a handy event tracking script to help you track key aspects of your website's user experience, including the time people spent on the site, the way people scroll through your website, and how people browse through your website.

Want help installing this on your website? Request our Google Analytics setup service where we'll install this code and more so you have all the tools you need to understand your website's user experience.

var keyElementIDs = ["keypara","cta"]; // which ids do you want tracked, this can be tracked page by page
var keyElementOptions = { // could be page by page or sitewide
withinDistance: 250, // people have to scroll this much beyond the element before it tracks (prevents it from tracking when an item appears just at the bottom of the screen)
minSecondsSeen: 5 // people have to view the key element at least this many seconds before the event triggers (set to 0 if you are okay with tracking people who just scroll right by it)
};
function UXEventsCheckVisible(e,t,n){t=t||0,n=n||"visible";var l=e.getBoundingClientRect(),i=Math.max(document.documentElement.clientHeight,window.innerHeight),o=l.bottom-t<0,c=l.top-i+t>=0;return"above"===n?o:"below"===n?c:!o&&!c}function UXEventsVisitorTimer(){UXEventsPageState()&&(activeTime+=1),totalTime+=1}function UXEventsGetScrollPercent(){var e=document.documentElement,t=document.body,n="scrollTop",l="scrollHeight";return((e[n]||t[n])/((e[l]||t[l])-e.clientHeight)*100).toFixed(2)}var activeTime=0,totalTime=0,maxScrollY=0,maxScrollYpercent=0,maxScrollYtime=0,scrollRecapEventSent=!1,keyElementSent=[],keyElementScrollTime=[],keyElementClicks=[],userScrolled=!1,prevPageEventSent=!1,UXEventsPageState=function(){var e,t,n={hidden:"visibilitychange",webkitHidden:"webkitvisibilitychange",mozHidden:"mozvisibilitychange",msHidden:"msvisibilitychange"};for(e in n)if(e in document){t=n[e];break}return function(n){return n&&document.addEventListener(t,n),!document[e]}}();window.onscroll=function(e){if(userScrolled=!0,window.scrollY>maxScrollY&&(maxScrollY=window.scrollY,maxScrollYpercent=UXEventsGetScrollPercent(),maxScrollYtime=activeTime),keyElementIDs.length>0)for(var t=0;t<keyElementIDs.length;t++){var n=document.getElementById(keyElementIDs[t]);if(void 0===keyElementScrollTime[t]&&(keyElementScrollTime[t]=[],keyElementScrollTime[t].to=0,keyElementScrollTime[t].below=0),void 0!==n&&null!=n){var l=UXEventsCheckVisible(n,keyElementOptions.withinDistance,"above"),i=UXEventsCheckVisible(n,keyElementOptions.withinDistance,"below");l||i||0!=keyElementScrollTime[t].to||(keyElementScrollTime[t].to=activeTime),l&&0==keyElementScrollTime[t].below&&(keyElementScrollTime[t].below=activeTime)}}},window.onunload=window.onbeforeunload=function(e){var t=document.cookie.replace(/(?:(?:^|.*;\s*)prevPage\s*\=\s*([^;]*).*$)|^.*$/,"$1");if(""!=t&&(document.cookie="prevPage=; expires=Thu, 01 Jan 1970 00:00:00 GMT",""!=t&&(prevPageEventSent||(ga("send","event","User Experience","Post Click Activity",activeTime+"|"+totalTime+"|"+t,{nonInteraction:true}),prevPageEventSent=!0))),document.cookie="prevPage="+window.location.href,scrollRecapEventSent||(ga("send","event","User Experience","Time Recap",activeTime+"|"+totalTime,{nonInteraction:true}),ga("send","event","User Experience","Scroll Recap",activeTime+"|"+totalTime+"|"+maxScrollYpercent+"|"+maxScrollYtime+"|"+UXEventsGetScrollPercent(),{nonInteraction:true}),scrollRecapEventSent=!0),userScrolled)for(var n=0;n<keyElementIDs.length;n++)keyElementSent.indexOf(n)<0&&keyElementScrollTime[n].to>0&&(0==keyElementScrollTime[n].below&&(keyElementScrollTime[n].below=activeTime),void 0===keyElementClicks[n]&&(keyElementClicks[n]=0),ga("send","event","User Experience","Key Element Activity",keyElementIDs[n]+"|"+keyElementScrollTime[n].to+"|"+keyElementScrollTime[n].below+"|"+keyElementClicks[n]+"|"+activeTime,{nonInteraction: true}),keyElementSent.push(n))},document.body.addEventListener("click",function(e){for(var t=0;t<keyElementIDs.length;t++){var n=document.getElementById(keyElementIDs[t]);void 0!==n&&null!=n&&document.querySelector("#"+keyElementIDs[t]).contains(e.target)&&(void 0===keyElementClicks[t]&&(keyElementClicks[t]=0),keyElementClicks[t]++)}}),window.setInterval(UXEventsVisitorTimer,1000);
</script>