Tracking user interaction on a website
I am trying to track user interaction on a website that I manage myself. By tracking I mean, I want to track which button or widget the user pressed and when and also how much time a user spent and etc. Before I dive into coding something up on Javascript, I just to get an idea what are best options to do such things and possible pitfalls.
Answer
It's been some time since this question was posted, but I've been working on a simple JavaScript module to do just this.
Rather than using images, it captures event data from user-specified HTML element(s) along side some basic information about the site visitor's browser configuration. The data is then sent to a specified server endpoint using an XHR triggered on the beforeunload event.
Here's a link to the GitHub project and an example page
Regarding the code, here's an example of what the HTML would look like:
<!DOCTYPE html>
<html>
<head>
<title>Interaction Tracker Example</title>
</head>
<body>
<div class="someElement"></div>
<div class="someOtherElement"></div>
<div class="conversion"></div>
<script src="interactor.min.js" type="application/javascript"></script>
<script>
// An example instantiation with custom arguments
var interactions = new Interactor({
interactions : true,
interactionElement : "someElement someOtherElement",
interactionEvents : ["mousedown"],
conversions : true,
conversionElement : "conversion",
conversionEvents : ["mouseup"],
endpoint : '/usage/interactions',
async : true
});
</script>
</body>
</html>
The architecture allows you to easily track multiple elements through multiple instantiations, allowing you to customize which endpoints different interactions are sent to. This allows for clean separation of any server-side pre-processing prior to saving the data to a database.
var elementsToTrack = [
{
element : "cssClass1",
events : ["mouseup", "touchend"],
endpoint : "/interactions/c1"
},
{
element : "cssClass2",
events : ["mouseup"],
endpoint : "/interactions/c2"
},
{
element : "cssClass3",
events : ["mouseup"],
endpoint : "/interactions/c3"
}
];
for (var i = 0; i < elementsToTrack.length; i++) {
var el = elementsToTrack[i];
new Interactor({
interactionElement : el.element,
interactionEvents : el.events,
endpoint : el.endpoint
});
}
Finally, it's very lightweight (about 5KB minified) and easily extendable to most needs.