Google Analytics: Integrazione con un Angular WebSite

Integrare Google Analytics in un sito web effettuato con Angular non è immediato come per un sito web tradizionale. Nei siti tradizionali, il contatore di Google Analytics si integra bene in quanto sono Multi Page Applications. Sviluppando con Angular ci troviamo davanti ad un sito Single Page Applications (SPA) e le cose cambiano un attimo.

Google Analytics: Prerequisito

Per potere utilizzare un contatore di Google Analytics dobbiamo prima avere l’account registrato sulla piattaforma di Analytics, registrare il sito web in questione e copiare il codice di monitoraggio fornito da Google per incollarlo nel sito in questione.

Google Analytics & Angular: 

Come funziona l’integrazione? Apriamo tramite il nostro editor preferito (Visual Studio Code va benissimo) i seguenti file:

• app.module.ts

• index.html

• app.component.ts

index.html

Il file index.html sarà il primo dei tre indicati che andremo a modificare. La modifica è veramente semplice. Bisognerà prendere il codice di monitoraggio fornito da Google Analytics ed applicarlo sotto il tag “<>/app-root>**” con una nota di attenzione.

Dal codice appena inserito dobbiamo rimuovere la riga contenente

ga(‘send’, ‘pageview’);

ed otteneremo un risultato simile al seguente: index.html (typescript)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

[...]
</app-root>
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXXX-Y', 'auto');
ga('set', 'anonymizeIp', true);
</script>
[...]

app.component.ts

Ora non ci resta che applicare le seguenti modifiche al file app.component.ts ed il gioco è fatto. app.component.ts (typescript)

1
2
3

import {Router, NavigationEnd} from '@angular/router';

app.component.ts (typescript)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

declare let ga: Function;

constructor(public router: Router) {
this.router.events.subscribe(event => {
  if (event instanceof NavigationEnd) {
	ga('set', 'page', event.urlAfterRedirects);
	ga('send', 'pageview');
  }
});

Come potete notare, la riga rimossa in precedenza nel file index.html

ga('send', 'pageview');

è stata inserita adesso nel file app.component.ts

L’altra riga inserita setta “page” con l’url ottenuto dal cambio di componente ed in questo modo ci sarà l’aggiornamento delle statistiche in maniera corretta.

ga('set', 'page', event.urlAfterRedirects);

Come dicevo all’inizio non è immediato come in caso di applicazioni MPA, ma utilizzare un sito SPA crea un effetto finale totalmente diverso e ve lo dice una persona che non è amante del frontend.

Link

Google Analytics