Brainleaf
Web Resources

In questo articolo vediamo come implementare un contatore di click dinamico in una pagina web al fine di monitorare alcuni link che ci interessano. Questa pratica può essere utile per vari scopi, sui quali adesso non ci soffermeremo. Vediamo quindi come creare un file di log per ogni link che vogliamo tenere sotto controllo. Questo file di log funzionerà come un mini database all'interno del quale verrà scritto il numero di click che un dato link ha ricevuto.

Questo contatore di click funziona quindi senza l'ausilio di alcun database. Ciò che è richiesto è solo PHP5 istallato sul vostro server e jQuery incluso nella pagina html.

Per eseguire il conteggio dei click e salvare i dati in un file di log, abbiamo messo a disposizione un comodo tool ajax/php in grado di aiutarvi. Questo tool monitora l'attività di un dato elemento e ogni volta che questo elemento riceve un click, un determinato file di log (scelto da voi) verrà aggiornato con il nuovo conteggio. Installare ed utilizzare il tool clickCounter è molto semplice. Di seguito riporto una lista di operazioni da eseguire e un esempio pratico per l'inserimento del counter in una pagina e il monitoraggio di due link. Come prima cosa però, scaricate il pacchetto in download.

Download Version 1.0.0

Per inserire il counter in una tua pagina esegui queste operazioni:

  1. scaricate il nostro pacchetto bl-clickCounter da uno dei pulsanti di questa pagina;
  2. decomprimete il pacchetto;
  3. uplodate i file click.counter.js e click.counter.php sul vostro server;
  4. includete la libreria jQuery nella vostra pagina html;
  5. includete il file click.counter.js nella vostra pagina html;
  6. assegnate una id univoca al link che intendere monitorare;
  7. aprite con un editor il file click.counter.js e modificatelo come necessario

Per testare il funzionamento di questo tool potete servirvi del file click-counter-demo.html in quanto il codice contenuto in click.counter.js è già predisposto per funzionare con questo file.

Di seguito un ulteriore esempio pratico d'uso

HTML

Includedte i file necessari

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/click.counter.js"></script>

Assegnare una id univoca ai due link da monitorare

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

JAVASCRIPT

Aprire e modificare il file nel seguente modo

/* Parte di codice da modificare */
/* -------------------------------------------- */

/* Primo Link */

$('#first-link').on('click', function(){
    var phpFile = "click.counter.php";    // posizione file php
    var dataArr = {}
        dataArr.fileName = "first-link.log";    // nome del file di log (per il primo link)
        dataArr.logDir = "logs/";   //path della directory dei log (deve terminare con una slash)
    clickCounter(phpFile,dataArr);
});


/* Secondo Link */

$('#second-link').on('click', function(){
    var phpFile = "click.counter.php";   
    var dataArr = {}
        dataArr.fileName = "second-link.log";// nome del file di log (per il secondo link) 
        dataArr.logDir = "logs/";   
    clickCounter(phpFile,dataArr);
});

/* Parte di codice da non modificare */
/* -------------------------------------------- */

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!');
        }
    });
}

Se volete vedere una demo live dell'uso di questo script potete trovarne una all'url:
http://factory.brainleaf.eu/tools/ajax/click-counter

Download Version 1.0.0

Joomla SEF URLs by Artio