User Activity Tracking using javascript library [closed]

Question

Is it possible to track every action of a user on a webpage and creating log of it? The idea is to transfer log of user actions to server via AJAX and saving it. On each event for each element I can write code/logic to write some log in console, but I was wondering if there is any library/shortcut available which can log all actions on webpage at client side including events and actions such as copy, paste, click, double click, selection etc. with their element reference.

Answer 1

You can use ready-made solutions:

• http://www.google.com/analytics/
• http://www.clicktale.com/
• https://segment.io/
• http://www.extrawatch.com/
• http://mouseflow.com/
• https://www.seevolution.com/
• http://clicky.com/

You can do amazing stuff with Google Analytics and its Event Tracker:

• https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide
• http://searchenginewatch.com/article/2287906/10-Google-Analytics-Custom-Events-That-Track-the-Untrackable

If you're looking for a custom-made solution, you can try the following one with PHP and JavaScript:

• http://css-tricks.com/tracking-clicks-building-a-clickmap-with-php-and-jquery/

Keep in mind that using third-party solutions is better performance-wise. Writing the coordinates of the mouse movements in a database in real time, needs a lot of resources.

Answer 2

Personally I hate 3rd party like google analytics and similar company. Because I dont want to share my web analytics with them. Anyway there is a very very lightweight (about 5KB minified) and easily extendable javascript library.

Here is git repo: https://github.com/greenstick/interactor and you can see a preview of it: http://greenstick.github.io/interactor/

What Data is Provided?

General Data:

• Which page is loaded
• When the user loaded the page
• When the user left the page
• The URL of the loaded page
• The previous page location
• The title of the page
• The language settings of the user
• The user's platform
• The port used to access the web server
• The inner and outer width and height of the web browser

Interaction / Conversion Data:

• The interaction type (i.e. general interaction or conversion)
• The time of the interaction
• The event that triggered interaction
• The target HTML element tag
• The target HTML element classes
• The target HTML element content (i.e. text, etc.)
• The cursor position relative to client
• The cursor position relative to screen

Example:

var elementsToTrack = [
{
    element: "element1",
    events : ["mouseup", "touchend"]
}, 
{
    element: "element2",
    events : ["mouseup"]
},
{ 
    element: "element3",
    events : ["mouseup"]
}
];

for (var i = 0; i < elementsToTrack.length; i++) {
var e = elementsToTrack[i];
new Interactor({
    interactionElement  : e.element,
    interactionEvents   : e.events
});
}

I Hope this information will be helpful.