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.
