Google Analytics zu Angular hinzufügen

Die Integration von Google Analytics (GA) in eine Angular-Anwendung ermöglicht es Ihnen, das Nutzerverhalten zu verfolgen und wertvolle Daten über die Nutzung Ihrer Anwendung zu sammeln.

Schauen wir uns die für diese Integration erforderlichen Schritte an.

Einrichten einer Google Analytics-Eigenschaft

Wenn Sie dies noch nicht getan haben, erstellen Sie eine GA-Eigenschaft. Hierfür benötigen Sie ein Google Analytics-Konto. Stellen Sie sicher, dass Sie eine Google Analytics 4 (GA4)-Eigenschaft einrichten, um mit den neuesten Analysefunktionen von Google auf dem Laufenden zu bleiben. Nach der Einrichtung erhalten Sie eine "Measurement ID" (z. B. "G-XXXXXXXXXX").

Installieren Sie die Angular Google Analytics Bibliothek

Es gibt mehrere Bibliotheken für die Integration von GA mit Angular, wie z.B. angular-gtag. Installieren Sie sie mit npm:

npm install angular-gtag

Konfigurieren Sie das Angular-Modul

Importieren Sie in Ihrer Angular-App die Bibliothek in der app.module.ts und fügen Sie sie zum Array imports hinzu:

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

Ersetzen Sie 'IHRE_MEASUREMENT_ID' durch Ihre tatsächliche GA Measurement ID.

Tracking in Komponenten implementieren

Sie können nun den Gtag-Service in Ihren Komponenten verwenden, um Seitenaufrufe oder bestimmte Ereignisse zu verfolgen:

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' }); } }

Testen und Bereitstellen

Nachdem Sie den Tracking-Code implementiert haben, stellen Sie Ihre Anwendung bereit. Verwenden Sie das Google Analytics-Dashboard, um zu überprüfen, ob Daten empfangen werden. Sie können auch Browsererweiterungen wie Google Analytics Debugger für Chrome verwenden, um das Tracking zu debuggen und zu überprüfen.

Überlegungen und bewährte Praktiken

Einhaltung von Datenschutzgesetzen: Achten Sie auf Datenschutzgesetze wie die GDPR und stellen Sie sicher, dass Ihre Anwendung diese einhält, einschließlich der Einholung der Zustimmung der Nutzer für Cookies, falls erforderlich.
Benutzerdefinierte Ereignisverfolgung: GA ermöglicht die Verfolgung benutzerdefinierter Ereignisse. Identifizieren Sie die wichtigsten Nutzerinteraktionen in Ihrer Anwendung, die Sie nachverfolgen möchten, und implementieren Sie das Ereignis-Tracking für diese.
Überprüfen Sie die Daten regelmäßig: Überprüfen Sie regelmäßig Ihr GA-Dashboard, um sicherzustellen, dass die Daten korrekt erfasst werden und um Erkenntnisse zu gewinnen.

Abschließende Überlegungen

Das Hinzufügen von Google Analytics zu Ihrer Angular-Anwendung ist eine leistungsstarke Methode, um Einblicke in das Verhalten Ihrer Nutzer zu erhalten. Allerdings kann Google Analytics für viele Unternehmen zu komplex sein.

Bei Simple Analytics bieten wir eine einfachere und datenschutzfreundlichere Analyselösung an, die eine einfachere Schnittstelle bietet, um die benötigten Informationen zu erhalten. Schauen Sie sich unser Live-Analyse-Dashboard an und überzeugen Sie sich selbst.

Google Analytics Glossar