Real Time Javascript Event Tracking (Javascript Stats)

Question

There are lots of real time web stats services on the web (w3counter-histats-gostats).They just count once when page is requested , But what I want to do is track javascript functions/events, because my website is fully-ajax.So I want something like google analytic's event tracker (http://code.google.com/intl/en/apis/analytics/docs/gaJS/gaJSApiEventTracking.html) , but real time , and very simple .It can be hosted or just a php script.Thank you .

example events

• user created something
• user deleted something
• ajax error happend
• browser eror happend
• user logged in

I found my answer take a look

Answer 1

It's not so hard to implement your own. You just send request to the server when an event happens like: tracker.gif?action=create&what=sth, tracker.gif?action=error&what=k_is_undefined, etc.

Then you parse the server logs for the stats. (or you send your request right into the database by tracker.php?action=create&what=sth)

Since you control the site it's now easy to make these requests when a user logs in, or an ajax request fails.

For error handling you can use window.onerror:

// send a request about an event to the server
function fireEvent(action, message, options) {
 var loggerUrl = "/tracker.gif", parameters;
 options = options || {};
 options.url = options.url || window.location.href;
 options.user_agent = navigator.userAgent;
 options.message = message;
 for (var i in options) {
 if (options.hasOwnProperty(i)) {
 parameters += "&" + i + "=" + encodeURIComponent(options[i]);
 }
 } 
 new Image().src = loggerUrl + parameters;
}
// log script errors
window.onerror = function(errorMessage, url, line) { 
 fireEvent("error", errorMessage, {
 url: url, 
 line: line
 });
 return true;
};
// example event on the page
fireEvent("ajaxError", "XY page failed to load");

(note: window.onerror is not available in safari)

---

UPDATE

And here is a proof of concept for a PHP parser:

$i = 1;
$d = file_get_contents("log.txt");
$requests = explode("\n", $d);
foreach ($requests as $req) {
 $pos = strpos($req, "tracker.gif");
 if ($pos === false) continue;
 $start_pos = strpos($req, "?", $pos);
 $end_pos = strpos($req, " ", $start_pos); // can also be " HTTP"
 $length = $end_pos - $start_pos;
 $req = substr($req, $start_pos+1, $length);
 $exprs = explode("&", $req);
 echo $i . ".<br>"; // request number
 $i += 1;
 foreach ($exprs as $expr) {
 list($name, $value) = explode("=", $expr);
 echo $name . " =>" . $value . "<br>"; // key => value
 }
}

• Oguz Bilgic: Interesting alternative solution which I have not seen before (tracker.gif).
• gblazex: Google Analytics does the same thing actually. Interesting means you're gonna try it out?
• Oguz Bilgic: Yes. I am testing it right now , but my current problem is parsing log file , Dou you have any idea to parse it easily .
• Oguz Bilgic: x.x.x.32 - - [08/Jul/2010:16:58:24 -0700] "GET /example.com/favicon.ico HTTP/1.1" 200 356 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.99 Safari/533.4" ------- this is one line
• Oguz Bilgic: I like this , perfect .Thank you .

Answer 2

If you're using jQuery, you can run code during the $.ajaxSuccess event

• Oguz Bilgic: This is not related to my question. I asked what is the best way to record all these events and errors to database and report time live.
• Jason: how is it not related? i don't know what stat tracking program you're using. i simply gave you a method to run code to track when something happens. completely relevant if you ask me.
• Oguz Bilgic: I did not asked How to detect AjaxSucces . I asked how to track all my javascript event , record and report them .
• TNi: It is related, a do-it-yourself solution.
• Jason: @oguz Of course you didn't ask how to detect ajax success. that would be a silly, self-answering question. you asked "my page is ajax. i need a way to track hits. How do i do this?" i responded with, "run your hit tracking code during the ajaxsuccess event". i'm not going to tell you step by step how to track your own analytics! how would i know anything about your database, etc?

Answer 3

Use Google Analytics and _trackPageview() as outlined here!

Edit: If that doesn't give you the solution that you are looking for, I think you are looking for a service that doesn't yet exist, in which case, take Jason's $.ajaxSuccess() suggestion and make your own.

• Oguz Bilgic: I am asking that If there is a php script like that , or if there is a free service likte that.

Answer 4

This is what I am looking for , Unfortunately, This is not free , But I hope I will find one .

http://mixpanel.com

• Anurag: checkout kissmetrics.com, it's in a private beta but a really cool product

Answer 5

There are plenty of options if you google for "real time analytics". But most of them are paid.

I'd recommend mixpanel and chartbeat.

Answer 6

If someone is still looking, I've found great pleasure in using Piwik as an open source alternative.

For tracking events there's the good JavaScript client, with some documentation.

For event tracking I'm using this plain function where needed:

_paq.push( [ 'category', 'action', 'name', 'value' ] );

Then you can export all data from the web views of Piwik or directly query the DB for retrieving information, if you are hosting the Piwik on your server.