Nell’ambito dello sviluppo di un e-commerce, il cui front-end è stato sviluppato con Angular 8, il cliente ci ha chiesto di tracciare le attività degli utenti, possibilmente tramite Google Analytics, in modo da avere statistiche live sui prodotti gestiti dal sito.

Google Analytics è sicuramente il prodotto più conosciuto atto ad offrire delle modalità di tracciamento delle visite a un sito web, il tempo che l’utente trascorre su ogni pagina e ciò che fa.

Il tracciamento delle attività dell’utente è necessario per gran parte delle aziende del mondo poiché aiuta a fornire dati preziosi con i quali creare campagne di marketing efficaci e migliorare la user experience.

Un’altra peculiarità è il monitoraggio dei tempi di caricamento e l’accessibilità del sito, informazioni tramite le quali uno sviluppatore può ottimizzare la sua applicazione Web.

Google Analytics è stato progettato per applicazioni multipagina, dal momento che calcola il numero di visualizzazioni tracciando la navigazione dell’utente da una pagina all’altra.

Angular, d’altro canto, è un framework per applicazioni a pagina singola, il che significa che il browser tecnicamente carica solo una pagina e, ogni qual volta una una pagina “cambia”, il DOM sta semplicemente aggiornando parti di essa, tramite l’utilizzo dei componenti che la formano.

Quindi, anche se il collegamento nella barra degli indirizzi cambia dinamicamente, in realtà ci troviamo sempre sulla stessa pagina principale e Google Analytics non può naturalmente sapere, nella sua implementazione base, che si tratta di una vista diversa.

Prima di iniziare l’integrazione, dobbiamo registrare la nostra applicazione con Google Analytics e ottenere un ID di monitoraggio. Andiamo alla pagina web di Google Analytics e facciamo accesso con le nostre credenziali Google.

Verrà visualizzato un menu a discesa in cui faremo clic su “Analytics”.

Una volta fatto accesso, possiamo accedere al modulo di registrazione in cui verranno inseriti i dettagli dell’applicazione Web.
Accettiamo i termini e le condizioni e, infine, facciamo clic sul pulsante “Ottieni ID monitoraggio”.

Veniamo ricondotti alla dashboard dove ci viene mostrato il nostro ID di monitoraggio, che utilizzeremo nella nostra applicazione.

Nella sezione di amministrazione Tracking Info -> Tracking Code, possiamo ottenere lo script javascript da inserire nelle nostre pagine, contenente un link a un file esterno e la definizione della funzione gtag(), che è la protagonista dell’integrazione di Google Analytics con altri framework.

Il codice contenuto nella sezione Global Site Tag (gtag.js) va inserito nel file index.html, come ultimo elemento del tag head.

In questo modo possiamo utilizzare in tutta la nostra Web application la funzione gtag() a seconda delle nostre necessità.

Come accennato in precedenza, le nostre applicazioni Angular vengono eseguite all’interno di una pagina, e, per monitorare correttamente le pagine tramite Google Analytics, abbiamo necessità di conoscere la URL su cui l’utente naviga pur senza caricare una nuova pagina.

Per ottenere l’URL possiamo effettuare una sottoscrizione agli eventi del router e verificare se sono di tipo NavigationEnd e, in caso affermativo, invocare gtag() passando come parametro la proprietà urlAfterRedirects dell’evento sottoscritto.

La chiamata a gtag(), nello specifico gtag (‘config’, ‘[Tracking Id]’), esegue la parte di visualizzazione della pagina.

Per avere una prima (e sicuramente più veloce) integrazione di Google Analytics, che ci consentirà di tracciare le URL visitate dall’utente, possiamo inserire le istruzioni appena scritte in app.component.ts, dal momento che è il file principale dell’applicazione che viene caricato a livello più alto.
Il nostro file app.component.ts sarà simile a questo:

import{Router, NavigationEnd} from '@angular/router';
 
declare let gtag: Function;
 
export class AppComponent {
 constructor(public router: Router){  
     this.router.events.subscribe(event => {
        if(event instanceof NavigationEnd){
            gtag('config', 'xx-xxxxx-xx',
                  {
                    'page_path': event.urlAfterRedirects
                  }
                 );
         }
      }
   )}
}

Ci sono altri parametri che possiamo usare per arricchire ulteriormente il tracciamento. La lista di tutti i parametri è presente nella pagina della documentazione ufficiale (https://developers.google.com/analytics/devguides/collection/gtagjs/pages).

Un’altra fondamentale integrazione di Google Analytics consiste nel tracciamento degli eventi, che aggiunge un ulteriore livello di dati alle statistiche di Analytics.

Per rendere coerente l’integrazione e ridurre la quantità di codice duplicato nella nostra applicazione, creiamo un servizio Angular da utilizzare nei nostri componenti.

Tramite la Angular CLI possiamo generare un servizio ed aggiungerlo ad app.module.ts con l’istruzione:

ng generate s GoogleAnalytics

Il nostro app.module.ts diventerà quindi:

import {GoogleAnalyticsService} from './google-analytics.service';
...
@NgModule({
   providers: [GoogleAnalyticsService],
});
export class AppModule { }

All’interno di GoogleAnalyticsService, creiamo una funzione pubblica eventEmitter che, essenzialmente, eseguirà gtag assicurandosi la corretta formattazione.

Naturalmente dobbiamo dichiarare la funzione gtag() al fine di esporre il servizio all’esterno.

Il nostro GoogleAnalyticsService sarà simile a:

declare let gtag:Function;
export class GoogleAnalyticsService {
   public eventEmitter( 
       eventName: string, 
       eventCategory: string, 
       eventAction: string, 
       eventLabel: string = null,  
       eventValue: number = null ){ 
            gtag('event', eventName, { 
                    eventCategory: eventCategory, 
                    eventLabel: eventLabel, 
                    eventAction: eventAction, 
                    eventValue: eventValue
                  })
       }
}

Abbiamo creato il service GoogleAnalyticsCartService che funge da wrapper per GoogleAnalyticsService:

export class GoogleAnalyticsCartService {
public addToChart(productId) {
this
    .googleAnalyticsService
    .eventEmitter(‘add_to_cart’, ‘shop’, ‘cart’, ‘click’, productId);
    }
 
public removeFromChart(productId) {
this
    .googleAnalyticsService
    .eventEmitter(‘remove_from_cart’, ‘shop’, ‘cart’, ‘click’, productId);
    }
}

Per utilizzare questo servizio, dobbiamo importarlo nel componente ed eseguirlo quando accade qualcosa (come un evento clic su un pulsante) e trasmettere i valori che desideriamo monitorare all’eventEmitter per l’esecuzione.

Nella nostra implementazione, abbiamo utilizzato la funzione eventEmitter per tracciare i seguenti eventi:

• aggiunta di prodotto al carrello;
• eliminazione di prodotto dal carrello;

Abbiamo creato un componente ShopComponent che gestisce l’aggiunta di un prodotto

Nel caso dell’aggiunta di un prodotto al carrello, abbiamo un button che richiama la funzione SendAddToCartEvent passando come argomento l’id del prodotto.

<button (click)="SendAddToCartEvent(productId)">Add To Cart</button>

E, nel nostro componente, gestiamo SendAddToCartEvent in modo che richiami la funzione eventEmitter definita prima.

.
import{GoogleAnalyticsCartService} from './google-analytics-cart.service';
 
export class ShopComponent implements OnInit {
 
    constructor(
        public googleAnalyticsCart: GoogleAnalyticsCartService
    )
 
    SendAddToCartEvent(productId){  
    this
        .googleAnalyticsCart
        .addToCart(productId);
    } 
}

Allo stesso modo, gli eventi di eliminazione di un prodotto dal carrello saranno gestiti tramite la funzione eventEmitter:

SendRemoveFromCartEvent(productId){ 
    this
        .googleAnalyticsCart
        .addToCart(productId);
}

Un’altra funzionalità offerta da Google Analytics è il tracciamento degli utenti.

Per poter filtrare gli eventi e le visualizzazioni di pagina per utente, è necessario abilitare l’User-ID nel pannello di configurazione di Analytics.

Una volta abilitato l’User-ID è possibile configurare l’utente corrente nella nostra applicazione Angular, semplicemente utilizzando:

gtag(‘set’, ‘userId’, userid)

dove userid è una stringa che rappresenta univocamente l’utente del sistema.

Al momento della login dell’utente, è consigliabile recuperare un parametro, ad esempio un indice o un guid (non informazioni personali come nome, email, indirizzo) e impostarlo come userId.

Come per la gestione degli eventi, abbiamo creato un metodo wrapper per configurare l’utente:

public setCurrentUser(userId: string){  
    gtag('set', ‘userId’, userId);
}

a sua volta utilizzato nel LoginComponent:

import{GoogleAnalyticsService} from './google-analytics.service';
 
export class LoginComponent implements OnInit {
 
    constructor(
        [...]
        public googleAnalytics: GoogleAnalyticsService
    )
 
    login(username, password){
        […]     
        var userId = this.http...
        this
            .googleAnalytics
            .setCurrentUser(userId);
    } 
}

Google Analytics offre anche la possibilità di verificare se le operazioni sulla nostra Web application siano state effettuate all’interno di una sessione utente o meno.

Tramite il menu Audience -> Behavior -> User-ID Coverage è possibile ottenere il dato delle operazioni effettuate da utenti Assigned (loggati e tracciati) e Unassigned (non loggati).

Per visualizzare le operazioni filtrate per utente, invece, bisogna creare una vista.

Nel menu Tracking Info -> UserID è possibile, una volta configurate le impostazioni (User-ID policy e Session Unification), possiamo creare una view.

In questo modo, per ogni operazione effettuata dagli utenti, sarà possibile, tramite il pannello di Google Analytics, filtrare per utente le operazioni.

Il progetto di esempio allegato a questo articolo è un semplice e-commerce, con una lista di prodotti che possono essere aggiunti al carrello, e un carrello tramite il quale gestire i prodotti (aumentando o diminuendo la quantità).

Lanciandolo con:

ng serve --watch

e navigando su http://localhost:4200 otteniamo la dashboard:

cliccando sul nome del prodotto, si apre una pagina di dettaglio, mentre, cliccando su Add To Cart, questo viene aggiunto al carrello.

Cliccando sull’icona del carrello in alto a destra, possiamo gestire le quantità dei prodotti o rimuoverli.

Una volta effettuato un numero di operazioni sufficiente, possiamo recarci nel pannello di Google Analytics per visualizzare le statistiche del nostro sito.

Per la visualizzazione degli Eventi, invece, possiamo andare su Behavior->Events, e da lì filtrare per tipo di evento, id prodotto e, naturalmente, id utente.

In questo articolo abbiamo visto come integrare Google Analytics nei progetti Angular per ottenere statistiche degli utenti e degli eventi del sito.
Mi auguro di aver suscitato il vostro interesse per l’argomento.

Il progetto di esempio col codice utilizzato è disponibile qui.

Alla prossima!