{"id":26076,"date":"2020-09-30T00:00:00","date_gmt":"2020-09-29T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/?p=26076"},"modified":"2021-01-13T09:39:57","modified_gmt":"2021-01-13T08:39:57","slug":"google-analytics","status":"publish","type":"post","link":"https:\/\/blexin.com\/it\/blog\/google-analytics\/","title":{"rendered":"Google Analytics <3 Angular"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

Nell\u2019ambito dello sviluppo di un e-commerce, il cui front-end \u00e8 stato sviluppato con Angular 8, il cliente ci ha chiesto di tracciare le attivit\u00e0 degli utenti, possibilmente tramite Google Analytics, in modo da avere statistiche live sui prodotti gestiti dal sito.<\/p>\n\n\n\n

Google Analytics \u00e8 sicuramente il prodotto pi\u00f9 conosciuto atto ad offrire delle modalit\u00e0 di tracciamento delle visite a un sito web, il tempo che l\u2019utente trascorre su ogni pagina e ci\u00f2 che fa.<\/p>\n\n\n\n

Il tracciamento delle attivit\u00e0 dell\u2019utente \u00e8 necessario per gran parte delle aziende del mondo poich\u00e9 aiuta a fornire dati preziosi con i quali creare campagne di marketing efficaci e migliorare la user experience.<\/p>\n\n\n\n

Un\u2019altra peculiarit\u00e0 \u00e8 il monitoraggio dei tempi di caricamento e l\u2019accessibilit\u00e0 del sito, informazioni tramite le quali uno sviluppatore pu\u00f2 ottimizzare la sua applicazione Web.<\/p>\n\n\n\n

Google Analytics \u00e8 stato progettato per applicazioni multipagina, dal momento che calcola il numero di visualizzazioni tracciando la navigazione dell\u2019utente da una pagina all\u2019altra.<\/p>\n\n\n\n

Angular, d\u2019altro canto, \u00e8 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\u2019utilizzo dei componenti che la formano.<\/p>\n\n\n\n

Quindi, anche se il collegamento nella barra degli indirizzi cambia dinamicamente, in realt\u00e0 ci troviamo sempre sulla stessa pagina principale e Google Analytics non pu\u00f2 naturalmente sapere, nella sua implementazione base, che si tratta di una vista diversa.<\/p>\n\n\n\n

Prima di iniziare l\u2019integrazione, 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.<\/p>\n\n\n\n

Verr\u00e0 visualizzato un menu a discesa in cui faremo clic su “Analytics”.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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”.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Veniamo ricondotti alla dashboard dove ci viene mostrato il nostro ID di monitoraggio, che utilizzeremo nella nostra applicazione.<\/p>\n\n\n\n

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 \u00e8 la protagonista dell\u2019integrazione di Google Analytics con altri framework.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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

In questo modo possiamo utilizzare in tutta la nostra Web application la funzione gtag() a seconda delle nostre necessit\u00e0.<\/p>\n\n\n\n

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\u00e0 di conoscere la URL su cui l\u2019utente naviga pur senza caricare una nuova pagina.<\/p>\n\n\n\n

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\u00e0 urlAfterRedirects dell\u2019evento sottoscritto.<\/p>\n\n\n\n

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

Per avere una prima (e sicuramente pi\u00f9 veloce) integrazione di Google Analytics, che ci consentir\u00e0 di tracciare le URL visitate dall\u2019utente, possiamo inserire le istruzioni appena scritte in app.component.ts, dal momento che \u00e8 il file principale dell\u2019applicazione che viene caricato a livello pi\u00f9 alto.
Il nostro file app.component.ts sar\u00e0 simile a questo:<\/p>\n\n\n

\nimport{Router, NavigationEnd} from '@angular\/router';\n \ndeclare let gtag: Function;\n \nexport class AppComponent {\n constructor(public router: Router){  \n     this.router.events.subscribe(event => {\n        if(event instanceof NavigationEnd){\n            gtag('config', 'xx-xxxxx-xx',\n                  {\n                    'page_path': event.urlAfterRedirects\n                  }\n                 );\n         }\n      }\n   )}\n}\n<\/pre><\/div>\n\n\n
Ci sono altri parametri che possiamo usare per arricchire ulteriormente il tracciamento. La lista di tutti i parametri \u00e8 presente nella pagina della documentazione ufficiale (https:\/\/developers.google.com\/analytics\/devguides\/collection\/gtagjs\/pages<\/a>).<\/p>\n\n\n\n
Un\u2019altra fondamentale integrazione di Google Analytics consiste nel tracciamento degli eventi, che aggiunge un ulteriore livello di dati alle statistiche di Analytics.<\/p>\n\n\n\n
Per rendere coerente l\u2019integrazione e ridurre la quantit\u00e0 di codice duplicato nella nostra applicazione, creiamo un servizio Angular da utilizzare nei nostri componenti.<\/p>\n\n\n\n
Tramite la Angular CLI possiamo generare un servizio ed aggiungerlo ad app.module.ts con l\u2019istruzione:<\/p>\n\n\n\n
ng generate s GoogleAnalytics<\/code><\/p>\n\n\n\n
Il nostro app.module.ts diventer\u00e0 quindi:<\/p>\n\n\n
\nimport {GoogleAnalyticsService} from '.\/google-analytics.service';\n...\n@NgModule({\n   providers: [GoogleAnalyticsService],\n});\nexport class AppModule { }\n<\/pre><\/div>\n\n\n
All’interno di GoogleAnalyticsService, creiamo una funzione pubblica eventEmitter che, essenzialmente, eseguir\u00e0 gtag assicurandosi la corretta formattazione.<\/p>\n\n\n\n
Naturalmente dobbiamo dichiarare la funzione gtag() al fine di esporre il servizio all\u2019esterno.<\/p>\n\n\n\n
Il nostro GoogleAnalyticsService sar\u00e0 simile a:<\/p>\n\n\n
\ndeclare let gtag:Function;\nexport class GoogleAnalyticsService {\n   public eventEmitter( \n       eventName: string, \n       eventCategory: string, \n       eventAction: string, \n       eventLabel: string = null,  \n       eventValue: number = null ){ \n            gtag('event', eventName, { \n                    eventCategory: eventCategory, \n                    eventLabel: eventLabel, \n                    eventAction: eventAction, \n                    eventValue: eventValue\n                  })\n       }\n}\n<\/pre><\/div>\n\n\n
Abbiamo creato il service GoogleAnalyticsCartService che funge da wrapper per GoogleAnalyticsService:<\/p>\n\n\n
\nexport class GoogleAnalyticsCartService {\npublic addToChart(productId) {\nthis\n    .googleAnalyticsService\n    .eventEmitter(\u2018add_to_cart\u2019, \u2018shop\u2019, \u2018cart\u2019, \u2018click\u2019, productId);\n    }\n \npublic removeFromChart(productId) {\nthis\n    .googleAnalyticsService\n    .eventEmitter(\u2018remove_from_cart\u2019, \u2018shop\u2019, \u2018cart\u2019, \u2018click\u2019, productId);\n    }\n}\n<\/pre><\/div>\n\n\n
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.<\/p>\n\n\n\n
Nella nostra implementazione, abbiamo utilizzato la funzione eventEmitter per tracciare i seguenti eventi:<\/p>\n\n\n\n