Click Logging . . . Everything?

If you liked this post, say thanks by sharing it:

Every piece of data we can gather about users that visit our sites and use our applications is useful.  It helps us create a better user experience over time as we learn how people use our products.  Something I have been toying with recently is click-tracking. Every click a user makes on a site is a clue to how they are interacting with it and over time, its possible to see how a majority of users flow through your site.  Eventually we can even build heat maps and see user flow and harness this great data to give customers a better experience.

Google Analytics has been doing this for a while now with their ga.js library.  In it you can track different events, one of them being clicks.  It, however, is just a little complicated to implement and it seems like you have to have a separate call for everything you want to track.  For larger sites, this can quickly become cumbersome.

<a onclick="_gaq.push(['_trackEvent', 'Videos', 'Play', 'Baby\'s First Birthday']);" href="#">Play</a>

So…in response to this, I created my own click tracking system that is easy to implement, scalable, and runs on php and javascript.

My system is made of of a javascript file called trackit.js and a php file called trackit.php.

Trackit.js

Trackit.js binds all the button and a attributes on a page to it. It grabs the name and some other information about the document including the document URL.  When a button is clicked, it grabs the href that it is linked to and creates a post request to trackit.php. Tracked elements are required to have a name tag.

Ex:


$('a').bind('click', function() {
  var e_name = this.name;
  var curr_url = document.URL;
  var to_url = this.href;
  $.ajax({
  type: "POST",
  url: "inc/trackit.php",
  data: { name: e_name, url: curr_url, to_url: to_url, uid: uid }
  }).done(function( msg ) {
  });
 });

Trackit.php

Trackit.php simply grabs the post request and logs it to a database.

Ex:

<?
  include "db_con.php";

  $e_name = $_POST['name'];
  $curr_url = $_POST['url'];
  $to_url = $_POST['to_url'];
  $uid = $_POST['uid'];

$track = mysql_query("  INSERT INTO logs (uid, name, url, to_url, create_date)
  VALUES ('$uid','$e_name','$curr_url','$to_url' ,now())  ");
?>

Thats it. You could additionally track the IP address, device, and other header information about the user if you wanted to.The files are zipped and attached below, in the next version I will add IP and device tracking as well as some better documentation.

resumeIcon

Download TrackIt!

If you liked this post, say thanks by sharing it:
Tagged with: , , , , ,
Posted in php

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>