Ajax click tracking

This tutorial demonstrates a simple and easy way how to track your visitors clicks using Ajax and PHP.

Tutorial info:

Name:	Ajax click tracking
Total steps:	2
Category:	AJAX basic tutorials
Date:	2009-05-20
Level:	Beginner
Product:	See complete product
Viewed:	49471

Bookmark Ajax click tracking

Step 1 - Ajax click tracking

Ajax click tracking

There are many ways how to record your visitors activity on your page. In the next section I will show you one solution with Ajax and a small PHP code. Using this method your links still be Google friendly.

First of all if you have no experience with Ajax then it could help to read a basic Ajax tutorial.

To implement the click tracking tool we need to create 2 files:

clickDemo.html: This file contains the html with the links and the Ajax code.
clickTrack.php: This files will be called by Ajax and records the click event.

In this example the html body is as simple as possible to focus on the actual task. It looks like this:

Code: 
<body>
    <a href="http://www.ajaxf1.com" onclick="doWork(this);" >Test</a>
</body>
AJAX F1

The javascript code is a bit more but here only the doWork() function is really interesting for us. This function will process the mouse click, get the source and target locations and call the clickTrack.php to update the statistic. The code is the following:

Code: 
function doWork(element){
    httpObject = getHTTPObject();
    if (httpObject != null) {
        dst = element.href;
        src = document.location.href;
        httpObject.open("GET", "clickTrack.php?src="+src+"&dst="+dst, true);
        httpObject.send(null);
        httpObject.onreadystatechange = setOutput;
    }
}
AJAX F1

Now let's put everything together in the clickDemo.html file. The complete code looks like this:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ajax click tracking example</title>
 
<script language="javascript" type="text/javascript">
	function getHTTPObject(){
		if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
		else if (window.XMLHttpRequest) return new XMLHttpRequest();
		else {
			alert("Your browser does not support AJAX.");
			return null;
		}
	}
 
	// Change the value of the outputText field
	function setOutput(){
		return true;
	}
 
	// Implement business logic
	function doWork(element){
		httpObject = getHTTPObject();
		if (httpObject != null) {
			dst = element.href;
			src = document.location.href;
			httpObject.open("GET", "clickTrack.php?src="+src+"&dst="+dst, true);
			httpObject.send(null);
			httpObject.onreadystatechange = setOutput;
		}
	}
 
	var httpObject = null;
	var src = null;
	var dst = null;
</script>
 
	</head>
	<body>
		<a href="http://www.ajaxf1.com" onclick="doWork(this);" > Test </a>
	</body>
</html>
AJAX F1

In the next step we create the clickTrack.php file

Next Step of Ajax click tracking

Tags: ajax click tracking, click recording, ajax, click, tracking, recording

Ajax click tracking - Table of contents
Step 1 - Ajax click tracking
Step 2 - The server side script

AJAX F1

Help in AJAX, get AJAX code, scripts, tutorials

Ajax click tracking

Tutorial info:

Bookmark Ajax click tracking

Step 1 - Ajax click tracking

MoocPlayer