Thursday, January 25, 2007

Tracking and Visual Reporting of Web clicks

This is a knowledge tidbit that s very simple in concept but very powerful in it's possibilities. It came about because I was asked to "Track everything" on a web site. Every link followed, every click etc. Of course, they would want detailed reporting on it later that they couldn't define for me with requirements. At first I found this task very overwhelming, not only would I have to think of everything that they might want to report on, but I would have to code all of the pages to support it. While venting to a freind at work, he mentioned the idea f simply tracking everything based on the mouseclick events. With very little research I found that this was VERY doable. Here is a quick walkthrough. I will try to turn this into a small open source product, but until then this would get any web programmer started.

The first step is to create a small javascript that you include on all of your pages. Here is the entire script, I'l walk thorugh it in pieces.

//CALL THE 'LOGCLICKDETAILS' FUNCTION
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.onclick)
document.onclick = LogClickDetails;

// GET XY COORDINATES
function LogClickDetails(e)
{
//DECLARE AND INITIALIZE VARIABLES
var RequestURL = 'http://url to page that logs entry to database from url string variables.';
var userX = 0;
var userY = 0;
var ElementID = '';
var Destination = '';
var TemplateTitle = document.title;
var XmlHttpObj;

if (IE)
{
userX = event.clientX + document.body.scrollLeft;
userY = event.clientY + document.body.scrollTop;
}
else
{
userX = e.pageX;
userY = e.pageY;
}
if (userX <>
{
userX = 0;
}
if (userY <>
{
userY = 0;
}
//GET ELEMENT INFO

ElementID = window.event.srcElement.id;
Destination = window.event.srcElement.href

//ACTIONS
//CREATE THE URL WITH ALL OF THE RECODING INFO

RequestURL = RequestURL + '&TempTitle=' + escape(TemplateTitle) + '&ElemID=' + escape(ElementID) + '&UserX=' + escape(userX) + '&UserY=' + escape(userY) + '&Dest=' + escape(Destination) ;
//alert(RequestURL);

//MAKE THE CALL TO THE LOGGING PAGE THAT DOES THE DB INSERT if (window.XMLHttpRequest )
{
// If IE7, Mozilla, Safari, etc: Use native object
var XmlHttpObj = new XMLHttpRequest()
}
else
{
if (window.ActiveXObject)
{
// ...otherwise, use the ActiveX control for IE5.x and IE6

var XmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
}
}

XmlHttpObj.open("GET", RequestURL,false);
XmlHttpObj.send(null);
return true;

}

Sorry about the formatting, It's be nice if there was a good way to post code in blogger with syntax highlighting for some common languages.

This creates a function that grabs some information through javascript, constructs a url with a querystring and then makes the url call, effectively sending the info to a page waiting to receive and process it. Then it calls the function on the event of every mouse click.

The only non-standard piece of information I included hre was the loop to look for an element ID. This ensres that no mater where the user clicks thee is an element id associated with it. The better tagged the web page is with ID's the more accurate and useful the reporting will be.

You could add any other information to the process that can be collected by javascript. You could also dynamically pass info into it with something like PHP, ASP, or actionscript. This way you can asociate all of the info with another meaningful piece of information.

Step 2 would be to include this script in the head of your html, asp, php page... Like so:

script type="text/javascript" src="ClickTracking.js"



Step 3. create a page to prcess the data. This page will be referenced in the javascript. It will parse all of the variables and data in th querystring and do SOMETHING with it. I have it logging to a DB table. For the small product I'll create from this, It'll by a php script that logs to a MySQL DB.

Reporting. If you decided to send the information to a database table. It will be very easy to show meaningful data from it right away. Use a web scripting language like PHP. You can run normal grid style queries to find the most used page or element etc.

Aditionally, you could plot the clicks back on the page by creating "div layers" and absolute postioning them to the coordinaes recorded by the script. If you then lay this over the original page using an iframe with transparency, you'll see the click map over the the page in a way that might be useful than a grid report.

That's it, hopefully this is useful to someone, I appreciate any constructive comments and improvements.

Friday, January 12, 2007

Blog Kickoff

Here we go. I'll start this off with one BS post that has absolutely no value whatsoever, and then get to real things that I wanted to start a blog for later. I don't care for blogs, but I do like to share knowledge, and debate. I have a new found ability for organization, and writing things down so maybe I'll be able to keep up with this. I run across a lot of minor issues in my development experiences and many times I cannot find anyanswers on the web no matter how long I search. When I figure out the answer I feel like should make the answer available for the next person. So, that is what I'll try to provide here. Of course I'll have to go of on some tangents from time to time.