Ajax click tracking
Home - Tutorials - AJAX basic tutorials
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: | 49472 |
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:
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; } }
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>
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 |