This is a Free Ajax with PHP click tracking script to monitor clicks on html elements, including links and advertisements which open another page.
- It can also be used to track clicks on Google Adsense.
This tool is made with PHP and JavaScript, and registers in MySQL database various data of the clicked html element: tag-name, id, class, size (width and height) and position in page (top and left distance), and user`s IP.

• To download the script, click on this link: Download Track-Monitor clicks (19 KB).

• To test it: Demo Ajax Click Tracking script

For comments, questions, or any issue related to this application, write on Forum, in the "Scripts from Website" category.

Features

- Intuitive and easy to use Admin Panel, with a simple adminstration interface.
- Suports both PDO and MySQLi for accessing MySQL databases in PHP.
- It can be included in any html /php pages, templates or CMS (WordPress, Joomla, Drupal, PhpBb, ..).
- It tracks the clicks which make the user leaves the page.

Requirements

- PHP 5.4+
- MySQL 5.2+
- Modern Browser with JavaScript enabled.

Installation

  1. Download the archive with the script from the link above. Open to edit the "config.php" file.
  2. Add your data for Name and Password to ADMIN_NAME and ADMIN_PASS constants. They are needed to login in the page with clicks statistics.
  3. Add your data for connecting to MySQL database in the $mysql array.
  4. Copy the monitor_c folder on your server, directly in site root ('www' or 'public_html' directory).
  5. Add the following JavaScript code in the pages of your web site in which you want to track the clicks; at the end of the HTML document, before the </body>.
    <script>
    /*
    Here add the css selectors that match the elements to witch to track the clicks
    - leaves: elements that make the user leaves the page on clicks
    stay: elements that not open a page
    */
    var mc_selectors ={
    leaves: 'ins.adsbygoogle',
    stay: ''
    };
    </script>
    <script async src="/monitor_c/monitor_c.js"></script>
    
    • In the mc_selectors object add the CSS selectors that match the html elements you want to track the clicks.
    - The leaves property is for elements that make the user leaves the page on click. Here it is added the "INS" tag with class "adsbygoogle" for Google Adsense, to monitor the clicks on Adsense advertisements.
    - In the stay property add the css selectors for items that not open a page on click.

    • Example, track the clicks on INS tags with class "adsbygoogle", and on elements with ids: "elm1", "elm2"; which open a page on click. Also, monitor the clicks on SPAN with id "img1", and DIV tags that contain elements with class "monitor"; that not open a page.
    var mc_selectors ={
    leaves: 'ins.adsbygoogle, #elm1, #elm2',     //they open a page
    stay: 'span#img1, div .monitor'     //not opens a page
    };
  6. Open the "/monitor_c/index.php" page in the browser when you want to see the statistics of the clicks, that can be selected by clicked elements or pages address. Use the login data set in "config.php" (from ADMIN_NAME and ADMIN_PASS)

Screenshoots - Track and Monitor clicks

- Click on images
Monitor Clicks - id tagsStatistics by html tags ID.
Track Clicks - id tagsTrack Clicks by Pages.

Other Specifications

• The tables in MySQL database are created automatically. A table named "monitor_pgs" that stores the pages address and title; another table with the name "monitor_c_[YEAR]" that registers various data of the clicked elements in the added YEAR (current year).
• The clicked items are registered in database with an ID, if that element in page has not an "id" the script will auto set an ID when adds it in database. So, if you want to monitor the clicks on a specified html element in page, it is indicated to set it an ID.
• This script is Free, and Open Source. You can modify and use it for personal usage (not for comercial usage).

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Ajax click Tracking - Monitor clicks on html elements

Last accessed pages

  1. Butterfly Kyodai (34039)
  2. SHA1 Encrypt data in JavaScript (5869)
  3. List with Node.js Core Modules (2)
  4. Read Excel file data in PHP - PhpExcelReader (48544)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (59546)

Popular pages this month

  1. Qwop (7626)
  2. Drag Racer V3 (4432)
  3. Bubbles3 (1775)
  4. Flash Games - Free online Games (1614)
  5. Butterfly Kyodai (1288)