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

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


- 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.


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


  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>.
    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 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

Which tag renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em></em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
Indicate the PHP variable that contains data from a form sent with method="post".
if(isset($_POST["field"])) {
  echo $_POST["field"];
Ajax click Tracking - Monitor clicks on html elements

Last accessed pages

  1. Horizontal-Vertical Menu with Arrow Keys Navigation (2136)
  2. Draw arrow markers between clicks coords in Canvas (1451)
  3. CSS Trapezoid Shape (8489)
  4. Node.js Move and Copy Directory (8421)
  5. innerHTML and outerHTML to Get and Replace HTML content (25104)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (445)
  2. Register and show online users and visitors (324)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (243)
  4. JavaScript Course - Free lessons (237)
  5. querySelector and querySelectorAll (223)