User Experience Event Tracking Code

April 13, 2019

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? Contact me to help, and through my Google Analytics set-up service, I’ll install a more advanced version of this code, 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>

You may also like

How to Upgrade to GA4 & Should You?

How and when should you upgrade to the new version of Google Analytics, GA4? In this article, Matthew walks through the options you have to upgrade.

How To Find & Fix Duplicated Content

Put simply: Duplicate content confuses both human and robot visitors. Let’s walk through how we deal with duplicated content: locating, evaluating, and resolving.

Performing Regular Tech SEO Checks with SE Ranking

Although a Tech SEO Audit can be completed using a variety of tools, in this post, I want to walk through how we can do each of these tasks using SE Ranking’s audit tool.