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:27188

Bookmark Ajax click tracking



AddThis Social Bookmark Button

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:

  1. clickDemo.html: This file contains the html with the links and the Ajax code.
  2. 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:
  1. <a href="http://www.ajaxf1.com" onclick="doWork(this);" >Test</a>
  2. </body>

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:
  1. function doWork(element){
  2. httpObject = getHTTPObject();
  3. if (httpObject != null) {
  4. dst = element.href;
  5. src = document.location.href;
  6. httpObject.open("GET", "clickTrack.php?src="+src+"&dst="+dst, true);
  7. httpObject.send(null);
  8. httpObject.onreadystatechange = setOutput;
  9. }
  10. }

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

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Ajax click tracking example</title>
  8.  
  9. <script language="javascript" type="text/javascript">
  10. function getHTTPObject(){
  11. if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
  12. else if (window.XMLHttpRequest) return new XMLHttpRequest();
  13. else {
  14. alert("Your browser does not support AJAX.");
  15. return null;
  16. }
  17. }
  18.  
  19. // Change the value of the outputText field
  20. function setOutput(){
  21. return true;
  22. }
  23.  
  24. // Implement business logic
  25. function doWork(element){
  26. httpObject = getHTTPObject();
  27. if (httpObject != null) {
  28. dst = element.href;
  29. src = document.location.href;
  30. httpObject.open("GET", "clickTrack.php?src="+src+"&dst="+dst, true);
  31. httpObject.send(null);
  32. httpObject.onreadystatechange = setOutput;
  33. }
  34. }
  35.  
  36. var httpObject = null;
  37. var src = null;
  38. var dst = null;
  39. </script>
  40.  
  41. </head>
  42. <body>
  43. <a href="http://www.ajaxf1.com" onclick="doWork(this);" > Test </a>
  44. </body>
  45. </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



F1 Site Family
AJAX F1
CSS F1
Database F1
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Scripts F1
Tutorial F1
Windows F1

Family tutorials
PHP Array
PHP Redirect
PHP Session
MySQL Create User
Mysqldump Example
MySQL Concat
JavaScript String
JavaScript Timeout
JavaScript Tooltip

Total time: 0.0301