User Activity Tracking or Logging with javascript

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

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

Answer 3

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'
   });