Aggiungere Google Analytics ad Angular

L'integrazione di Google Analytics (GA) con un'applicazione Angular consente di monitorare il comportamento degli utenti e di raccogliere dati preziosi sull'utilizzo dell'applicazione.

Esaminiamo i passaggi necessari per questa integrazione.

Impostare una proprietà di Google Analytics

Se non l'avete ancora fatto, create una proprietà GA. A tal fine, è necessario disporre di un account Google Analytics. Assicuratevi di impostare una proprietà Google Analytics 4 (GA4) per rimanere aggiornati sulle ultime funzionalità di analisi di Google. Una volta configurata, si riceverà un "ID di misurazione" (come 'G-XXXXXXXX').

Installare la libreria Angular Google Analytics

Sono disponibili diverse librerie per integrare GA con Angular, come angular-gtag. Installarla utilizzando npm:

npm install angular-gtag

Configurare il modulo Angular

Nell'applicazione Angular, importare la libreria in app.module.ts e aggiungerla all'array imports:

import { BrowserModule } da '@angular/platform-browser'; import { NgModule } da '@angular/core'; import { GtagModule } da 'angular-gtag'; import { AppComponent } da './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, GtagModule.forRoot({ trackingId: 'YOUR_MEASUREMENT_ID', trackPageviews: true }) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Sostituire 'YOUR_MEASUREMENT_ID' con il proprio ID di misurazione GA.

Implementare il tracciamento nei componenti

È ora possibile utilizzare il servizio Gtag nei propri componenti per tracciare le visualizzazioni di pagina o eventi specifici:

import { Component } from '@angular/core'; import { Gtag } from 'angular-gtag'; @Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponent { constructor(private gtag: Gtag) { this.gtag.event('screen_view', { 'app_name': 'myApp', 'screen_name': 'Home' }); } }

Test e distribuzione

Dopo aver implementato il codice di tracciamento, distribuire l'applicazione. Utilizzare la dashboard di Google Analytics per verificare che i dati vengano ricevuti. È anche possibile utilizzare estensioni del browser come Google Analytics Debugger per Chrome per eseguire il debug e verificare il tracciamento.

Considerazioni e buone pratiche

Conformità alle leggi sulla privacy: Essere consapevoli delle leggi sulla privacy, come il GDPR, e assicurarsi che l'applicazione sia conforme a tali leggi, compreso l'ottenimento del consenso dell'utente per i cookie, se necessario.
Tracciamento di eventi personalizzati: GA consente di tracciare eventi personalizzati. Identificate le interazioni chiave dell'utente nella vostra applicazione che desiderate tracciare e implementate il tracciamento degli eventi per queste.
Controllare regolarmente i dati: Controllate regolarmente la dashboard di GA per assicurarvi che i dati vengano acquisiti correttamente e per ottenere informazioni.

Riflessioni finali

L'aggiunta di Google Analytics alla vostra applicazione Angular è un modo potente per ottenere informazioni sul comportamento dei vostri utenti. Tuttavia, Google Analytics può talvolta risultare eccessivamente complesso per molte organizzazioni.

Noi di Simple Analytics offriamo una soluzione analitica più semplice e più attenta alla privacy, fornendo un'interfaccia più facile per ottenere le informazioni necessarie. Date un'occhiata al nostro cruscotto di analisi dal vivo per verificarlo.

Google Analytics Glossario