CODEWITHSUNDEEP
javascriptgoogle-analyticsanalytics
eozzy
eozzy

Reputation: 68740

Real-time basic web analytics with Javascript

I need to develop an in-house real-time analytics solution (similar to GA or mixpanel for example) that collects:

.. and sends this data to the server with a single-pixel image request. Similar to how GA and other solutions work:

Google Analytics works by the inclusion of a block of JavaScript code on pages in your website. When users to your website view a page, this JavaScript code references a JavaScript file which then executes the tracking operation for Analytics. The tracking operation retrieves data about the page request through various means and sends this information to the Analytics server via a list of parameters attached to a single-pixel image request.

I wonder if there's any open source project available that does this part which I could use as base to build further. There's Piwik but its too feature-packed and too heavy for my requirement.

Edited to add: I'm doing something specific with the data, otherwise I'd just use the existing solutions.

Upvotes: 3

Views: 5500

Answers (2)

vorillaz
vorillaz

Reputation: 6286

There are 2 big solutions for open source analytics.

Piwik as you mentioned is a well documented and pretty mature solution. Drilling down the code, how Piwik makes things come around will give you some insights.

Open Web Analytics is the other big player on the game. A more simplified tool which will help you understand how basic tracking is made.

Depending on the data you want to track I would also suggest taking a look on this tutorial which uses sockets in order to track real time data.

Least but not last you can also check what Crazy Egg does if you want to track down user's interactivity.

Upvotes: 4

guest271314
guest271314

Reputation: 1

Try

var img = new Image;
img.width = img.height = "1px";
var res = window.navigator;
var data = {};
var _plugins = {};
Array.prototype.slice.call(navigator.plugins).forEach(function(v, k) {
  _plugins[v.name.toLowerCase().replace(/\s/, "-")] = {
    "name": v.name,
    "description": v.description,
    "filename": v.filename
  }
});
delete res.plugins && delete res.mimeTypes;
data.url = window.location.href;
data.ref = document.referrer;
data.nav = res;
data._plugins = _plugins;
// set `img` `dataset` with `data` ,
// send `img` to server , decode `img` `dataset` at server
img.dataset.stats = JSON.stringify(data);


var img = new Image;
img.width = img.height = "1px";
var res = window.navigator;
var data = {};
var _plugins = {};
Array.prototype.slice.call(navigator.plugins).forEach(function(v, k) {
  _plugins[v.name.toLowerCase().replace(/\s/, "-")] = {
    "name": v.name,
    "description": v.description,
    "filename": v.filename
  }
});
delete res.plugins && delete res.mimeTypes;
data.url = window.location.href;
data.ref = document.referrer;
data.nav = res;
data._plugins = _plugins;
img.dataset.stats = JSON.stringify(data);
document.write(
  img.dataset.stats       
);

Upvotes: 5

Related Questions