Utility Javascript per tracciare link esterni e download con Google Analytics

English

GA-urchin.trackLinks.js, una piccola libreria in Javascript per tenere traccia dei link esterni e dei download con Google Analytics. (Update: version 0.2.)

Ho scritto una piccola libreria in Javascript per monitorare link esterni e download con Google Analytics in modo semplice e “semi” automatico.

Il manuale di GA propone infatti, per monitore click su link la cui destinazione non puÃ?Â² contenere lo script di monitoraggio, di inserire un onclick = urchinTracker('/directory/che figurerÃ?Â nelle statistiche.htm').

La libreria GA-urchin.trackLinks.js evita di modificare ogni link esterno o di download.

Come si usa?

La sintassi minima per tracciare i link esterni è:

urchin = new urchin();
urchin.trackLinks();

Per tracciare anche i download:

urchin = new urchin();
urchin.trackDownload = "zip|rar|phps|avi|pdf";
urchin.trackLinks();

In questo esempio lo script traccerÃ?Â , oltre ai link esterni, i click a risorse interne con estensione zip, rar, phps, avi o pdf.

Dove inserire il codice? Ci sono 2 possibilitÃ?Â + 1:

Se il vostro codice di Google Analytics è posto prima della chiusura del tag body, come indicato dalle linee guida di GA, dovete modificare:

...
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-XXXXXX-X";
urchinTracker();
</script>
</body>

e farlo diventare:

...
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="/path/GA.urchin.trackLinks.js" type="text/javascript"></script>
<script type="text/javascript">
urchin = new urchin();
urchin.trackDownload = "zip|rar|phps|avi";
urchin.trackLinks();
_uacct = "UA-XXXXXX-X";
urchinTracker();
</script>
</body>

Se, invece, volete mettere lo script nell’head, il codice della libreria deve essere azionato all’evento onload:

...
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="/path/GA.urchin.trackLinks.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){
  urchin = new urchin();
  urchin.trackDownload = "zip|rar|phps|avi";
  urchin.trackLinks();
}
_uacct = "UA-XXXXXX-X";
urchinTracker();
</script>
</head>

O, per non rischiare di perdere click, utilizzare un’apposita libreria, come quella di Andrea Giammarchi (meno di 1 Kb), ed il codice:

...
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="/path/GA.urchin.trackLinks.js" type="text/javascript"></script>
<script src="/path/onContent.js" type="text/javascript"></script>
<script type="text/javascript">
onContent(function(){
  urchin = new urchin();
  urchin.trackDownload = "zip|rar|phps|avi";
  urchin.trackLinks();
});
_uacct = "UA-XXXXXX-X";
urchinTracker();
</script>
</head>

Se decidete di mettere il codice nell’head questa seconda soluzione è la più indicata.

Se invece utilizzate WordPress, potete utilizzare il plugin Google Analyticator di Ronald Heft che utilizza proprio queste due librerie Javascript e permette di personalizzare il codice direttamente dal pannello di amministrazione di WordPress.

La procedura dello script.

Questi sono, a grandi linee, gli step dello script al lancio della funzione trackLinks():

Ricava il dominio corrente (es. www.terenzani.it).
Verifica ogni link del documento.
Solo se il link è interno:
1. Controlla l’estensione
2. Se l’estensione è tra quelle impostate tra i file da considerare scaricabili, setta a quel link, per l’evento onclick, il lancio della funzione urchinTracker('/download/destinazione--a--cui--punta--il--link').
Se non è un link interno, setta per l’evento onclick il lancio della funzione urchinTracker('/outgoing/destinazione--a--cui--punta--il--link').

Il codice commentato.

Metto le mani avanti: non ho molta esperienza con Javascript, quindi è possibile che abbia usato qualche metodo bislacco. Comunque ogni consiglio è ben accetto.

GA urchin.trackLinks 0.1:

function urchin(){

 // La variabile in cui settare le estensioni da considerare download separate da |
 this.trackDownload = '';

 this.trackLinks = function(){
  var a = document.getElementsByTagName('a');
  // Estrae dalla location attuale il dominio
  // In domain[0] è salvato http://dominio.it/ o https://dominio.it/
  // In domain[2] dominio.it
  var domain = /^(http|https):\\/\\/([a-z-.0-9]+)[\\/]{0,1}/i.exec(window.location);
  // Le espressioni per individuare link interni e download
  var internalLink = new RegExp("^(http|https):\\/\\/"+domain[2], "i");
  var isDownload = new RegExp("("+this.trackDownload+")$", "i");

  // Per ogni link...
  for(var i = 0; i < a.length; i++){
   // Se è interno...
   if(internalLink.test(a[i].href)){
    // ... e se ha l'estensione definita in this.trackDownload ...
    if(this.trackDownload && isDownload.test(a[i].href))
     a[i].onclick = function(){
      // Pulisce e traccia l'URL
      urchinTracker('/download/'+this.href.replace(/^(http|https):\\/\\/([a-z-.0-9]+)\\//i, '').split('/').join('--'));
     }
   }
   else
   // è esterno
    a[i].onclick = function(){
     // Pulisce e traccia l'URL
     urchinTracker('/outgoing/'+this.href.replace(/^http:\\/\\/|https:\\/\\//i, '').split('/').join('--'));
    }
  }
 }
}

CompatibilitÃ?Â browser.

La libreria è stata testata con IE (5, 5.5 e 7) FireFox 2.0 e Opera 9.0 per Windows. Se avete un altro browser potete provare la demo on line.

Change logs.

Version 0.2: corrected the regexp to detect downloads: "("+this.trackDownload+")$".

Hai trovato interessante questo articolo? Se vuoi, inscrivendoti alla newsletter, puoi ricevere una notifica ogni volta che c'è un nuovo articolo da leggere, oppure puoi sottoscrivere il feed RSS. Se non sai cos'è puoi leggere: Cos'è e come si legge un feed.

di Francesco Terenzani, 21 dicembre 2006

post<li>

tag: google, Google Analytics, Javascript, tracking.

post correlati:

Commenti (19).

Someone scrive:
8 febbraio 2007 alle 17:36
I hope you all realize that by registering with Google Analytics, you allow them to use the information that you create. Read their terms of use!

I’m not sure if I want to give Google detailed information about how the visitors to my website behave, where they come in, where they come from, what they look at, how they browse the pages, where they leave, and where they leave to.

Knowledge is a weapon. Even now, Google is supporting the inhumane Chinese government or suppressing non-English information for European users.

Google begins to look a lot like Orwell’s big brother to me. I do not want to add to their power.
Salvatore Barbera scrive:
8 maggio 2007 alle 15:02
Veramente interessante… Libreria molto utile per l’interfacciamento con google analytics ;)

penso che quanto prima ne approfitterÃ?Â² grazie mille ^__^

ps: sto seriamente pensando di inserirti tra i blogroll, se ti va fa fatti sentire per uno scambio links :)
Fra_T scrive:
10 maggio 2007 alle 08:43
Grazie!
Credo sia migliorabile/semplificabile, ma comunque funziona :D

Il blogroll per ora non ce l’ho proprio, ma grazie della proposta :P
djingo scrive:
26 settembre 2007 alle 22:35
Should GA-urchin.trackLinks.js be put at the root of the website?
Fra_T scrive:
27 settembre 2007 alle 10:30
Sure! :-)
Gianluca scrive:
4 ottobre 2007 alle 13:04
Non riesco a farla funzionare (sono tecnicamente scarso).
Quando inserisco il codice modificato gli accessi su Analytics diventano zero.
Il file della libreria l’ho salvato nel sito sia nella cartella principale che in quella templates (utilizzo DreamWeaver).
Qualcuno puÃ?Â² cortesemente controllare se ho fatto errori nel codice o altro? Il mio sito è http://www.olympos.it.
Grazie,
Gianluca
Fra_T scrive:
4 ottobre 2007 alle 13:17
Ciao Guanluca,
prova a sostituire le virgolette (” “) con i doppi apici ".
Gianluca scrive:
7 ottobre 2007 alle 17:07
Ho sostituito le virgolette ed Analytics e’ ripartito ma non mi tiene traccia dei download tranne di uno.
Puo’ essere dovuto al fatto che i file in pdf e in doc del mio sito (www.olympos.it) li faccio aprire in una nuova finestra (_blank)? (l’unico che mi ha conteggiato non si apre infatti in una nuova finestra)
In caso affermativo c’e’ un sistema per poterli monitorare ugualmente?
Grazie,
Gianluca
Gianluca scrive:
8 ottobre 2007 alle 12:44
In riferimento al mio precedente post: ho controllato anche oggi ed in pratica la tracciabilitÃ?Â dei download dei file doc funziona correttamente mentre non funziona per i file pdf.
(Non c’entra nulla invece il fatto che il link sia ad una nuova finestra come avevo ipotizzato nel precedente post).
Grazie,
Gianluca
Fra_T scrive:
8 ottobre 2007 alle 13:18
Ciao Gianluca,
il codice mi sembra OK. Non so cosa possa essere… ho provato a scaricare un paio di PDF, vediamo se vengono tracciati…
Pingback: 30 seconds to Tambu · NovitÃ?Â di ottobre in Google Analytics.
16 ottobre 2007 alle 19:22
[...] Link in uscita: saranno tracciati per default, e non tramite tool di terzi (ad esempio quello di Terenzani [...]
Nicola scrive:
2 febbraio 2008 alle 08:40
Salve Francesco,

io sto provando il plugin Ultimate GA che permette giÃ?Â l’implementazione del nuovo “ga” code di Google (al posto del legacy “urchin”).
AL momento perÃ?Â² non ho nessuna traccia dei link outbound dal mio sito… conoscete tale plugin?
Fra_T scrive:
4 febbraio 2008 alle 21:12
Ciao Nicola, che io sappia con il nuovo codice ancora non si riesce ad avere info sui link esterni, è una feature che sarÃ?Â aggiunta prossimamente.
Nel frattempo puoi quindi solo utilizzare il vecchio codice…

Ciao,
Francesco
Maryhellen scrive:
3 aprile 2008 alle 17:36
Lo script era proprio quello che cercavo: un modo per tracciare lo scaricamento dei file… purtroppo perÃ?Â² non funziona.
Ho controllato: il codice è corretto, il percorso pure cosÃ?Â¬ come le virgolette. L’unica prova che non ho fatto è quella di spostare i file da una sottocartella della root (dove sono ora) alla root. Vi risulta che possa dipendere da questo? Grazie a tutti.
Fra_T scrive:
3 aprile 2008 alle 19:42
Ciao Maryhellen, sul tuo sito ho trovato due errori nell’implementazione del codice:

1) Tu inserisci il codice:
<script src=Ã¢â?¬ÂGA.urchin.trackLinks.jsÃ¢â?¬Â type=Ã¢â?¬Âtext/javascriptÃ¢â?¬Â>
Ma nella tua root il file GA.urchin.trackLinks.js non c’è.

2) Nel codice che hai messo sulle tue pagine:
```
<script src=Ã¢â?¬ÂGA.urchin.trackLinks.jsÃ¢â?¬Â type=Ã¢â?¬Âtext/javascriptÃ¢â?¬Â></script>
<script type=Ã¢â?¬Âtext/javascriptÃ¢â?¬Â>
urchin = new urchin();
urchin.trackDownload = Ã¢â?¬Å?zip|rar|mp3Ã¢â?¬Â;
urchin.trackLinks();
_uacct = Ã¢â?¬Å?UA-2547183-1Ã¢â?¬Â;
urchinTracker();
</script>
```
Al posto dei doppi apici ci sono le virgolette :-)
Maryhellen scrive:
4 aprile 2008 alle 12:24
Prima di tutto grazie mille per avermi risposto (cosÃ?Â¬ velocemente poi!).
Ho ricontrollato un’altra volta, e ho scoperto che nel tuo codice di esempio:

il nome dello script è scritto
GA.urchin.trackLinks.js anzichè GA-urchin.trackLinks.js.

Domani saprÃ?Â² se il problema era questo.
Grazie ancora.
Maryhellen scrive:
5 aprile 2008 alle 13:05
Che meraviglia, ora funziona tutto!

Grazie mille.

Maryhellen
Fra_T scrive:
5 aprile 2008 alle 16:14
di niente :-)
ciao
dario scrive:
16 ottobre 2009 alle 13:42
la libreria che hai creato può anche monitorare i click sui link AdSense di Google?