Aggiungere più codici di monitoraggio Google Analytics in un sito

Immagine originale tratta da Fotolia
Tempo stimato di lettura: 3 minuti, 49 secondi
Pubblicato il 28 Gennaio 2015

Google Analytics lo conosciamo tutti, è lo strumento più usato per il monitoraggio e le statistiche dei siti web. In questo articolo ho preso spunto da un post in lingua inglese, su MarketLytics, che tratta una tematica importante: quella di aggiungere un codice di monitoraggio multiplo, nel caso di più proprietà Google Analytics di utenti diversi che, magari, gestiscono rispettivamente sezioni diverse del sito.

Premetto che l’articolo inglese sopra citato non è aggiornato sul nuovo tracking code (codice di monitoraggio) di Analytics, quindi qui ho riportato la versione attuale aggiornata.

La cosa da NON fare è quello di inserire i due codici di monitoraggio delle proprietà Google Analytics. Avere doppi codici di monitoraggio Analytics può causare errori di funzionamento e di elaborazione delle statistiche legati ai cookie usati da Google per permettere il tracciamento.

Cominciamo!

Codice di monitoraggio

Per prima cosa ottieni il codice Analytics da inserire nel sito dal primo account e copialo. Per trovarlo vai su Amministrazione, seleziona la proprietà in questione, e sotto clicca su Informazioni sul monitoraggio=>Codice di monitoraggio. Questo è un’esempio.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'ACCOUNT-1', 'auto');
  ga('send', 'pageview');

</script>

Facciamo la stessa cosa per il secondo account Google Analytics.

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'ACCOUNT-2', 'auto');
  ga('send', 'pageview');

</script>

Osservando il codice noterai che sono identici a parte l’ID Google Analytics che io ho sostituito con Account-1 e Account-2. Quello che dobbiamo fare è unire i due codici in uno solo, senza duplicare il codice identico. Quindi concentrati sulla seconda parte del codice, che contiene le chiamate GA (create e send) e modifica il codice come di seguito.

ga('create', 'ACCOUNT-1', 'auto');
ga('create', 'ACCOUNT-2', 'auto', {'name': 'newTracker'});  // New tracker.

Abbiamo praticamente aggiunto una riga per il secondo account. Il primo account sarà quello di default, mentre per il secondo abbiamo aggiunto un nome per identificarlo: nell’esempio ho usato newTracker prendendo di riferimento la spiegazione fatta nella guida ufficiale di Google Analytics.

Sotto le chiamate create c’è la chiamata send che anche in questo caso andrà duplicata e modificata come nell’esempio sotto.

ga('send', 'pageview');
ga('newTracker.send', 'pageview'); // Send page view for new tracker.

Anche qui la prima riga si rivolge al primo account, la seconda appena creata invia le statistiche al secondo account. Avrete notato che ho usato il nome newTracker impostato prima sulla chiamata send. Mi raccomando rispetta sempre maiuscole/minuscole e fai caso al . (punto) prima della seconda chiamata send (newTracker.send).

Ok? Facciamo un semplice esempio pratico. Se volessimo monitorare un clic su un pulsante del nostro, aggiungiamo un ID o una classe all’elemento da cliccare. Qui ho inserito l’ID cliccami.

<a id="cliccami" href="esempio.html">Clicca qui</button>

Nel codice Analytics dovrò aggiungere le seguenti righe. Per facilità d’uso e per un codice più snello, ho sfruttato jQuery.

$('#cliccami').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
  ga('newTracker.send', 'event', 'button', 'click', 'nav-buttons');
});

Capito il concetto? Anche qui ho 2 righe, ciascuna per ogni proprietà Analytics. Il simbolo # indica che mi riferisco a un ID, se fosse stata una classe avrei usato il punto (.cliccami, invece di #cliccami).

Per finire e fare maggiore chiarezza, ti metto il codice completo, così vedi il risultato finale. Buon lavoro!

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'ACCOUNT-1', 'auto');
ga('create', 'ACCOUNT-2', 'auto', {'name': 'newTracker'});  // New tracker.

ga('send', 'pageview');
ga('newTracker.send', 'pageview'); // Send page view for new tracker.

$('#cliccami').on('click', function() {
  ga('send', 'event', 'button', 'click', 'nav-buttons');
  ga('newTracker.send', 'event', 'button', 'click', 'nav-buttons');
});
</script>
Shares