Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 239
Zahid Hossain Avatar asked Sep 12 '13 21:09

Zahid Hossain


People also ask

What is the process of keeping track of a user's activity?

Sometimes called user activity tracking, user activity monitoring is a form of surveillance, but serves as a proactive review of end user activity to determine misuse of access privileges or data protection policies either through ignorance or malicious intent.

What do websites use to track users?

Website tracking works with the use of cookies and similar tracking technologies that collect and process the actions of end-users in order to present you with aggregated and targeted statistics on their movements, interests, behavior and preferences.

Which of these tools can be used for tracking user behavior?

The best tools for tracking user behavior are Userpilot for tracking in-app behavior and how users progress through the journey, Amplitude for a wide range of analytics data and Hotjar for heatmaps and session recording.


1 Answers

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.

like image 85
Greenstick Avatar answered Sep 28 '22 09:09

Greenstick