CLiCk Counter

Demo Page

This tool is tinked as a webmaster tool, so it not print on html markup any kind of message. It simply updates a log file. To check its activity we provide some console logs.
To see properly the script work, open your browser console and see consol logs after click.

Demo Click (click to increase counter)

** Click Here to see Counter Log File **

Download

Download Version 1.0.0

Usage

In order to use this tool, simply:

JAVASCRIPT

Our script is very simple to use. It's consists in click event that launch an ajax call to a php file.
Some data must be passed to the php file by javascript.

/* Customizable function */
$('#clickCounter').on('click', function(){
    var phpFile = "click.counter.php";    // php file location
    var dataArr = {}
        dataArr.fileName = "clicks-counter.log";    // log file name
        dataArr.logDir = "logs/";   //logs directory path (must end with a slash)
    clickCounter(phpFile,dataArr);
});

/* Ajax Call Function - you don't need to customize anything after this line */
function clickCounter(phpFile,dataArr) {
    $.ajax({
        type: "POST",
        url: phpFile,
        data: dataArr,
        dataType: "json",
        success: function(data){
            console.log('CLiCk Counter: ' + data.result);
            console.log('CLiCk Counter: ' + data.message);
        },
        error: function(){
            console.log('CLiCk Counter: ajax error!');
        }
    });
}

USE EXAMPLE

In this example we make two different button with an associated counter log file.
Remember that this tool require one log file for each link you want to count.
Assuming that your page (where you want use counter) is named index.html and you have placed click.class.php and click-counter.js at the same level of index.html, follow the steps:

1) place two link on your page and be shure that they have an univocal id.

<a id="first-link" href="#">Link#1</a>
<a id="second-link" href="#">Link#2</a>

2) customize your js

/* Customizable function */
$('#first-link').on('click', function(){
    var phpFile = "click.counter.php";    // php file location
    var dataArr = {}
        dataArr.fileName = "first-link.log";    // log file name
        dataArr.logDir = "logs/";   //logs directory path (must end with a slash)
    clickCounter(phpFile,dataArr);
});

$('#second-link').on('click', function(){
    var phpFile = "click.counter.php";    // php file location
    var dataArr = {}
        dataArr.fileName = "second-link.log";    // log file name
        dataArr.logDir = "logs/";   //logs directory path (must end with a slash)
    clickCounter(phpFile,dataArr);
});

/* Ajax Call Function - you don't need to customize anything after this line */
function clickCounter(phpFile,dataArr) {
    $.ajax({
        type: "POST",
        url: phpFile,
        data: dataArr,
        dataType: "json",
        success: function(data){
            console.log('CLiCk Counter: ' + data.result);
            console.log('CLiCk Counter: ' + data.message);
        },
        error: function(){
            console.log('CLiCk Counter: ajax error!');
        }
    });
}