Da un bel po’ di tempo Google Analytics ha aperto la strada per la raccolta gratuita di statistiche del traffico del proprio sito web. Sono sicuro che molti di voi abbiano installato il codice di Google sui vostri siti e avete già utilizzato gli strumenti di reporting che fornisce. Tuttavia, ci sono alcune limitazioni al servizio standard che magari non hai incontrato ancora. Utilizzando il codice standard, possiamo solo monitorare vedute (track views) delle pagine in cui è installato il codice di monitoraggio. Diventa un po’ più difficile se si desidera tenere traccia del download dei file o dei links esterni, dove non possiamo aggiungere il codice JavaScript di Google.
Per iniziare

⤽
Lo scopo di questo post è quello di mostrare come è possibile modificare il codice standard di monitoraggio di Google utilizzando la potenza di jQuery per ottenere informazioni extra da rapporti di Google Analytics. Con jQuery, possiamo ottenere da Google Analytics la traccia dei tuoi download di files e dei click a siti esterni o particolari, senza dover pescare a strascico attraverso il vostro codice o scrivere qualsiasi tag in più su.
Proviamo a usare una nuova funzione di Google Analytics conosciuta come ‘Events’. Questo dovrebbe darvi una buona base per costruire il proprio codice ed estendere la potenza di Google Analytics ancora di più .
Se non lo avete già, andate al sito di Google Analytics e registratevi per un account gratuito. Sarà necessario impostare un profilo sito web, che dovrebbe essere piuttosto auto esplicativo.
Quando hai ottenuto il codice unico di monitoraggio (unique tracking code), sia dal nuovo account Google o dal vostro corrente sito web, prendere nota del numero di UA, ad esempio: UA-1234567-1. Questo è il vostro identificatore unico che informa a Google di quale sito tenere traccia e che ci servirà in seguito. Se hai già il codice di monitoraggio installato sul tuo sito, cancellarlo. Altrimenti si potrebbe finire per duplicare le statistiche!

Google Analytics Events
⤽
Prima che Google avesse rilasciato la nuova funzione pageTracker._trackEvent(), dovevamo usare la normale funzione pageTracker._trackPageview(). Per rendere i vostri links esterni e i downloads dei files distinti dalle normali visite della pagina, era possibile passare a questa funzione un’URL modificata. Per esempio, diciamo che abbiamo voluto monitorare il download di un file PDF chiamato mioFile.pdf. Possiamo anche aggiungere una cartella finta davanti al nome del file. Questa cartella può non esistere sul tuo sito, è lì solo per individuare facilmente i downloads nei rapporti di Google Analytics.
Potremmo chiamare questa funzione in questo modo:
Copia codice 

#
pageTracker._trackPageview('/downloads/mioFile.pdf');
#
Si potrebbe desiderare di utilizzare questo metodo al posto delle funzioni più recenti, tocca a voi. Comunque, io vi consiglio di dare un’occhiata alle nuove funzioni in quanto consente di tenere traccia con più efficienza.
Per ulteriori informazioni sui rilevamenti di eventi leggere, Google Analytics Event Tracker Guide. Vedrete com’è flessibile il nuovo metodo e si può espandere per tenere traccia di altri eventi sul tuo sito web.

Gli eventi in Google Analytics

Allo stato attuale, la nuova funzione per monitorare un evento è ancora in fase beta sul sito di Google Analytics e non tutti gli account hanno l’accesso di default. Quando si è connessi in Google Analytics, cliccate dal menù a sinistra la voce Contenuti e sotto la categoria Eventi, selezionate la voce Panoramica. Una volta lì , cliccate sul pulsante “Aggiungi alla Dashboard” al di sopra del rapporto e questo aggiungerà il Monitoraggio di Eventi sezione Rapporti personalizzati della Dashboard.

Integrando jQuery
⤽
Ci sono un paio di opzioni disponibili quando si carica il codice jQuery, è possibile scaricare una copia dal sito jQuery e lo useremo a livello locale, o come faremo di seguito, lo useremo direttamente dalla libreria di codici di Google.
Nella sezione del codice HTML, copiare e incollare il seguente codice.
Copia codice 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Questa istruzione carica la versione ridotta di jQuery 1.7.1, che è la versione corrente al momento in cui si edita questo post; si potrebbe verificare che esista una versione più recente disponibile. Per ulteriori informazioni su jQuery, date un’occhiata alla documentazione di jQuery.

Scrivere il codice di monitoraggio personalizzato
⤽
Sempre nel <head></head>, direttamente sotto il codice che abbiamo appena inserito, inserite il seguente:
Copia codice 

<script type="text/javascript">
$(document).ready(function(){
   var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
   $.getScript(gaJsHost + "google-analytics.com/ga.js", function(){
      try {
         var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
         pageTracker._trackPageview();
      } catch(err) {}
      var filetypes = /\.(zip|exe|pdf|csv|doc*|xls*|xml|gz|ppt*|mp3)$/i;
   });
});
</script>
Invece di caricare il codice Javascript di Google direttamente dal mark up, useremo la funzione $(document).ready di jQuery che carica il codice non appena il DOM è pronto, il che significa che il nostro codice è pronto prima che qualsiasi contenuto della pagina sia caricato. Perciò possiamo puntare elementi, come collegamento ipertestuale, quando questi vengono caricati dal browser.
Poi, abbiamo incluso il codice standard di monitoraggio di Google per la registrazione della pagina corrente che è stata visitata. La differenza qui è che stiamo usando un’altra funzione jQuery, $.getScript, per caricare il file JavaScript di Google e quindi creare una funzione da eseguire una volta che il file viene caricato. Assicurati di sostituire la UA-xxxxxxx-x con il proprio numero unico UA. Abbiamo poi impostato una variabile chiamata filetypes che contiene un’espressione regolare per trovare tutti i collegamenti con le estensioni di file più comuni, è possibile aggiungere o rimuovere le estensioni dei file che si desidera monitorare.
Links in uscita
⤽
Ora arriviamo alla parte in cui si aggiunge il codice che effettivamente inizia a monitorare i collegamenti aggiuntivi. Inizieremo con tutti i collegamenti ipertestuali esterni presenti nella pagina.
Aggiungere il seguente codice di script subito dopo la dichiarazione filetypes:
Copia codice 

      $('a').each(function(){
         var href = $(this).attr('href');
         if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){
            $(this).click(function() {
                var extLink = href.replace(/^https?\:\/\//i, '');
                pageTracker._trackEvent('External', 'Click', extLink);
            });
         }
      });
La funzione $('a').each avrà come obiettivo ogni tag <a> a sua volta ed eseguire il codice all’interno della funzione stessa nei confronti di tale tag. La prima parte di questa funzione è quella di impostare una variabile, href, che contiene il valore dell’attributo href di ogni tag <a>.
Nostro primo if esegue due controlli. E si avvale della funzione .match per verificare se il valore della nostra variabile href sia http: o inizia con https: (Utilizzando una semplice espressione regolare) e che non contiene il dominio corrente del sito (cioè esterno).
Se da questa istruzione if viene restituito vero, allora aggiungiamo un evento click al tag <a> corrente che il nostro script sta guardando. Quando questo evento click viene attivato, si usa un’altra espressione regolare per togliere il http:// o https:// dal percorso del collegamento. Infine, utilizziamo la funzione pageTracker._trackEvent di Google per inviare i dettagli dell’evento al nostro account Google Analytics. La prima opzione da impostare per la funzione è la categoria del link, io ho usato ‘External’. L’opzione successiva serve per impostare l’azione, in questo ho usato ‘Click’. L’ultima opzione è quella di inviare l’etichetta del link, in questo ho usato l’url del link esterno.
Se vogliamo monitorare qualche particolare sito esterno, come gli shorturl proposti da goo.gl, da https://bitly.com o da altri simili non dobbiamo che inserire un ulteriore controllo subito dopo la prima verifica (non contiene il dominio corrente del sito) un’altra espressione regolare per catturare, come nel seguente esempio, un dominio determinato.
Copia codice 

if ((href.match(/^https?\:/i)) && (!href.match(document.domain))) {
   if (href.match(href.match(/\/\/goo\.gl\//))) {
      $(this).click(function() {
            var extLink = href.replace(/^https?\:\/\//i, '');
            pageTracker._trackEvent('Google','Click', extLink);
      });
   } else {
      $(this).click(function() {
         var extLink = href.replace(/^https?\:\/\//i, '');
         pageTracker._trackEvent('External','Click', extLink);
      });
   }
}
Monitorare links contenete indirizzo di posta
⤽
Il prossimo tipo di collegamento che stiamo per individuare sono tutti i collegamenti con un indirizzo e-mail che potrebbero essere nella pagina corrente. Come sapete, l’indirizzo e-mail è preceduto da mailto:, e questo ci permette di individuarlo facilmente con jQuery.
Subito dopo l’ultima istruzione if, che monitora i siti esterni, aggiungere il seguente codice di script:
Copia codice 

else if (href.match(/^mailto\:/i)){
    $(this).click(function() {
        var mailLink = href.replace(/^mailto\:/i, '');
        pageTracker._trackEvent('Email', 'Click', mailLink);
    });
}
Questo funziona esattamente nello stesso modo come la prima istruzione if per i link esterni. Usiamo un’espressione regolare per trovare tutti i collegamenti e-mail, pulire il collegamento fino rimuovendo tutto il precedente a mailto:: per poi sparare l’evento di monitoraggio di Google.
Monitorare i downloads
⤽
Un ultimo tipo di link che monitorare sono i downloads di files. Ancora una volta, useremo un’espressione regolare, che provvederà a controllare ogni link se corrisponde con una delle variabili filetypes che abbiamo creato in precedenza.
Aggiungere il seguente codice di script sotto l’ultima dichiarazione:
Copia codice 

else if (href.match(filetypes)){
    $(this).click(function() {
        var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
        var filePath = href.replace(/^https?\:\/\/(www.)miodomino\.com\//i, '');
        pageTracker._trackEvent('Download', 'Click - ' + extension, filePath);
    });
}
Anche in questo caso, il processo è lo stesso, ma questa volta ci accingiamo a estrarre l’estensione del file in una variabile chiamata extension con un’altra espressione regolare. Se il collegamento è un collegamento assoluto (cioè ha il collegamento pieno http://www.miodomino.com/ nel percorso del file), rimuoveremo il protocollo e il nome di dominio perché non abbiamo davvero bisogno di questo dato nei nostri rapporti su Google Analytics: sappiamo già che il link è locale al nostro sito. Assicurati di sostituire miodomino.com con il tuo nome di dominio e anche il codice UA di Google.
Ecco il codice per intero (con le lacune rimosse in modo che si adatti meglio alla pagina):
Copia codice 

<script type="text/javascript">
$(document).ready(function(){
   var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
   $.getScript(gaJsHost + "google-analytics.com/ga.js", function(){
      try {
         var pageTracker = _gat._getTracker("UA-xxxxxxx-x");
         pageTracker._trackPageview();
      } catch(err) {}
      var filetypes = /\.(zip|exe|pdf|doc*|xls*|ppt*|mp3)$/i;
      $('a').each(function(){
         var href = $(this).attr('href');
         if ((href.match(/^https?\:/i)) && (!href.match(document.domain))) {
            if (href.match(href.match(/\/\/goo\.gl\//))) {
               $(this).click(function() {
                  var extLink = href.replace(/^https?\:\/\//i, '');
                  pageTracker._trackEvent('Google','Click', extLink);
               });
            } else {
               $(this).click(function() {
                  var extLink = href.replace(/^https?\:\/\//i, '');
                  pageTracker._trackEvent('External','Click', extLink);
               });
            }
         } else if (href.match(/^mailto\:/i)){
            $(this).click(function() {
               var mailLink = href.replace(/^mailto\:/i, '');
               pageTracker._trackEvent('Email', 'Click', mailLink);
            });
         } else if (href.match(filetypes)){
            $(this).click(function() {
               var extension = (/[.]/.exec(href)) ? /[^.]+$/.exec(href) : undefined;
               var filePath = href.replace(/^https?\:\/\/(www.)miodomino\.com\//i, '');
               pageTracker._trackEvent('Download', 'Click - ' + extension, filePath);
            });
         }
      });
   });
});
</script>