User Activity Tracking using javascript library

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.


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

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

Tags:

Javascript

Html

Logging

Dom

Jquery

Recent Posts