Usiamo Google Analytics per tracciare gli errori JavaScript

Sono sicuro che hai già incontrato Google Analytics e che, come il sottoscritto, l'unico momento in cui ti trovi di fronte a lui è quando dobbiamo prendere un codice per un cliente o un nostro nuovo sito, oppure quando controlliamo le statistiche dei propri progetti. Ebbene quest'oggi ti presento un modo alternativo che ti permetterà di scovare gli errori JavaScript, buona lettura!

Google Analytics è uno dei tool principali presenti in quasi tutti i siti per poter studiare e tracciare le visite e gli utenti per poter migliorare il proprio business.

Come strumento è veramente potente e quindi ha anche una API veramente avanzata per fare molte cose ed oggi ne sfrutteremo una piccola parte per poter utilizzare questo servizio in modo da salvare gli errori JavaScript e consultarli comodamente in un secondo commento.

Ovviamente non è un argomento da deboli di cuore e per questo motivo mi sento in dovere di rilasciarti qualche indicazione prima di proseguire!

Google Analytics non è pensato per questo tipo di informazioni infatti esistono molti servizi ad hoc più avanzati principalmente per il reporting con una interfaccia semplificata. Infatti per catalogare questo tipo di informazioni questo software non le raggruppa per tipo di errore e questo potrebbe comportare qualche problema e potremmo trovarci molti duplicati.

Inoltre è sconsigliato per i siti con un alto traffico perchè Google Analytics nel piano gratuito (si c’è anche il piano a pagamento) ha un limite giornaliero di richieste e quello che andremo a realizzare quest’oggi potrebbe moltiplicare il numero di chiamate possibili.

Concludendo le precauzioni non và usato in fase di sviluppo, ma solamente in ambiente di produzione per verificare il corretto funzionamento del sito.

Prendendo ispirazione da questo articolo ho composto questo snippet:

Come puoi vedere tu stesso, il gist è diviso in due parti perchè esistono due versioni di Analytics. La cosidetta versione classica che consiste nel file ga.js e la universal analytics.js.

La classica è la più diffusa ed è più vecchia mentre la universal è la più recente ed oltre ad implementare una nuova API permette nuovi tipi di tracciamento. Quindi essendo il codice diverso tra le due versioni è il caso di utilizzare il codice per la versione di analytics specifica.

Catturare gli Eventi con JavaScript

Come puoi vedere ad una prima occhiata il codice è più o meno lo stesso tra le due versioni ma vediamo di analizzare prima la parte JavaScript per la cattura degli eventi e poi di vedere nel dettaglio analytics.

Questo codice è il cosiddetto JavaScript Vanilla ovvero niente framework ma JavaScript allo stato puro. Con l’oggetto window accediamo ai metodi della finestra che ci permette di utilizzare addEventListener (non compatibile da ie9 e precedenti) grazie al quale possiamo aggiungere del codice da eseguire allo scatenarsi di un evento specifico, a livello globale (essendo un metodo di window l’evento è riferito a tutto quello che c’è dentro ovvero la pagina e le azioni della finestra come il resize).

L’evento a cui noi ci agganciamo è error che viene lanciato quando in quell’oggetto viene scatenato un’errore qualunque. Dall’errore di sintassi a tutto il resto. In questo modo riusciamo a tracciare tutti gli errori che avvengono nella nostra pagina, forte vero?

La prima riga all’interno di questo evento che inseriamo ci permette di sapere l’errore che otteniamo grazie all’oggetto err, la linea da ispezionare e la colonna ovvero la posizione del carattere iniziale che ha creato il problema.

Successivamente nell’invio delle informazioni manderemo anche l’User Agent dell’utente così potremo anche replicare il problema.

Comprendere l’Errore con jQuery

Per il momento abbiamo trattato l’argomento soltanto dal punto di vista del linguaggio JavaScript, ma come dobbiamo comportarci se vogliamo scoprire l’errore che viene lanciato da jQuery?

Questo codice ci permette di agganciare una funzione allo scatenarsi del metodo interno di jQuery .error(), che altro non è che una shortcut per l’evento error visto poco fà ma è usato da plugin, per questo motivo è bene inserirlo se nel nostro sito usiamo jQuery, perchè ci permette di tracciare anche gli errori di questo framework.

Questo codice invece ci permette di tracciare gli eventi d’errore durante le chiamate AJAX.

Con questi tre eventi e metodi possiamo tracciare tutti gli errori che possono avvenire in una pagina classica e che sfrutta jQuery, mica pizza e fichi eh?

Torniamo a Parlare di Google Analytics

Analizziamo un codice di Analitycs Universal:

Come possiamo vedere i parametri sono molto facili da comprendere: specifichiamo l’azione eseguita, di che tipo di informazione si tratta, il titolo (per poterli raggruppare tutti sotto lo stesso nome), il messaggio che conterrà le informazioni e l’user agent. Oltre a questo inseriamo delle informazioni per far ignorare questi dati per il bounce rate del sito stesso.

Nel caso della richiesta AJAX il codice è un tantino più complesso perchè include le informazioni specifiche della richiesta.

Prendendo il codice d’esempio fornito nel mio articolo di riferimento possiamo anche vedere in azione il tutto:

Come si può vedere dall’articolo originale ci sono anche le gif che mostrano come accedere a queste informazioni. Qua te ne mostro una ad esempio:

Conclusioni

Per concludere mi sono lanciato alla ricerca di librerie pensato allo scopo un tantino più avanzate rispetto a questi snippet che possono essere salvati quando si ha che fare con certi clienti che hanno errori inspiegabili.

Ho trovato quindi su GitHub questa libreria dal nome GAP che riconosce automaticamente la versione di Google Analytics quindi fornisce un wrapper ma inoltre fornisce dei metodi già pronti per poter salvare informazioni dedicate come per l’eCommerce o per i social. In questo modo possiamo tracciare eventi specifici a seconda dello scopo, oltre alla modalità debug.

Inoltre supporta l’auto riconoscimento tramite attributi dei tag!

Vediamo il codice così è più chiaro :-D

Con questo codice creiamo un classico link con dei tag data personalizzati che verrano subito individuati dalla libreria e quindi al click verranno salvate le informazioni come il valore.

Inoltre è possibile tracciare i click anche così:

Oppure i dati per l’eCommerce:

In poche parole questa libreria ci permette di tracciare non solo gli errori ma anche informazioni assicurandoci una retrocompatiblità tra le due librerie di Google ed una semplicità inaudita.

Google Analytics ci permette di tracciare gli utenti ma anche di personalizzare questo tracciamento e di utilizzarlo per scopi non convenzionali solo che per un uso massiccio è preferibile sfruttare servizi pensati per questo lavoro che ci permettono di studiare meglio gli errori sulle nostre pagine.

Lascia il tuo Pensiero