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:
#
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.
<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:
<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:
      $('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.
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:
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:
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):
<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>
Similari
Creare URL corto utilizzando jQuery e Ajax
13% JQuery
Molti tutorial disponibili sul web per la creazione di URL brevi utilizzano lo script sul lato server, questo script funziona sul lato client. È facile e ha soli 5 righe di codice per chiamare le API di Bit.ly in modo asin…
Metodi per collegare e scollegare i gestori in jQuery
10% JQuery
Uno dei punti forti della nuova versione di jQuery (la 1.7), pubblicato un paio di settimane fa’, sono le funzioni .on() e .off(), che mirano a unificare i diversi metodi che avevamo a disposizione per assegnare e rilascia…
Il CDN di Google per distribuire il codice jQuery
9% JQuery
Troppo spesso, trovo del codice simile al seguente quando ispeziono il codice sorgente dei siti web che utilizzano jQuery: <script type="text/javascri…
Utilizzando il metodo data() di jQuery
9% JQuery
Ad un certo punto, tutti noi dobbiamo memorizzare qualche set di dati sul client. Possiamo memorizzare lo spazio dei nomi di variabili sempre in maggiore quantità evitando collisioni; possiamo memorizzare le variabili in q…
La bellezza del Metodo each() di jQuery
9% JQuery
La libreria jQuery fornisce un metodo, each(), che cicla ogni elemento dell’oggetto jQuery di destinazione. [expand expanded=”true” title=”Ciclare tutti i link” excerpt=”⤽” swapexcerpt=”” startwrap=”” endwrap=”” trigclass=…