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!

<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>

Request Free Strategy Session

Request a free strategy session to discuss the best way to improve your current marketing strategies and activities. During this free, no obligation, 40 minute call, we will help you begin to identify the best ways to get better results from your marketing.