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.

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 HTML element can be used to embed a SWF flash content?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Your browser not support SWF.
</object>
Which CSS pseudo-class adds a style to an input form field that has keyboard input focus?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Click on the instruction which converts a JSON string into a JavaScript object.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicate the PHP function which can be used to create or write a file on server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "The file was created";
else echo "The file can not be created";
Ajax click Tracking - Monitor clicks on html elements

Last accessed pages

  1. JavaScript Course - Free lessons (31647)
  2. Volume and Surface Area Calculator for 3D objects (11276)
  3. Using v-model in form input fields (1051)
  4. jQuery UI draggable - Drag elements (11445)
  5. Display data from PHP Array, or MySQL in HTML table (26980)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (310)
  2. The Mastery of Love (48)
  3. CSS cursor property - Custom Cursors (36)
  4. Read Excel file data in PHP - PhpExcelReader (35)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (31)