Ajax click Tracking - Monitor clicks on html elements

Php-mysql Course

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

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

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.

<img src="http://coursesweb.net/imgs/webcourses.gif" width="191" height="63" alt="Courses-Web" />

#id {
  font-style: italic;
}

$(document).ready(function() {
  $(".a_class").click(function(){ $(this).hide("slow"); });
});

function fname($a, $b) {
  echo $a * $b;
}