User Activity Tracking using javascript library [closed]

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.

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.

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.

I don't think that this kind of javascript library exist, you could easily build one with jquery, just listen to all the event (blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error)

and than send them to the server side using web sockets

Have you look at Google Analytic Event Tracking?

You need to embed the tracking function within your javascript but it is very convenience to use.

// Google API
_trackEvent(category, action, opt_label, opt_value, opt_noninteraction)

// Example
_trackEvent('checkout' 'remove-item' 'poodle skirt')

Update: 2017 New Analytics Api

// Api
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

// Example remove product id#27
ga('send', 'event', 'ecart', 'remove-item', 'poodle skirt', 27);
   // OR
ga('send', {
      hitType: 'event',
      eventCategory: 'ecart',
      eventAction: 'remove-item',
      eventLabel: 'poodle skirt'
   });