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
Product:See complete product

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:

  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:

  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:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  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>
  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. }
  19. // Change the value of the outputText field
  20. function setOutput(){
  21. return true;
  22. }
  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. }
  36. var httpObject = null;
  37. var src = null;
  38. var dst = null;
  39. </script>
  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
Java F1
JavaScript F1
Developer F1

Family tutorials
PHP Array
PHP8 on Windows10
Not a supported stylesheet mime type

PHP Utils
Latest video courses

Total time: 0.0052