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.

Help Using UX Events Reports

UX Events Code

<script>
/* UX Events
Matthew Edgar, Elementive
www.elementive.com

Events Triggered:
--Scroll Recap
--Time Recap
--Key Element Activity
--Post Click Activity

Reading Reports:
-- Scroll Recap - active time | total time | max scroll % | time to reach max scroll | scroll % at exit
-- Time Recap - active time | total time
-- Key Element Activity: key element | scroll to time | scroll beyond time | clicks on key element | active time on page to use for comparison
-- Post Click Activity - active time | total time | previous page
*/

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>

CONTACT ELEMENTIVE