Google Analytics Glossaire

Ajouter Google Analytics à Angular

Image of Iron Brands

Publié le 23 nov. 2023 et modifié le 8 avr. 2024 par Iron Brands

L'intégration de Google Analytics (GA) à une application Angular vous permet de suivre le comportement des utilisateurs et de recueillir des données précieuses sur l'utilisation de votre application.

  1. Configurer une propriété Google Analytics
  2. Installer la bibliothèque Angular Google Analytics
  3. Configurer le module Angular
  4. Mise en œuvre du suivi dans les composants
  5. Test et déploiement
  6. Considérations et bonnes pratiques
  7. Réflexions finales

Examinons les étapes nécessaires à cette intégration.

Configurer une propriété Google Analytics

Si vous ne l'avez pas encore fait, créez une propriété GA. Pour cela, vous avez besoin d'un compte Google Analytics. Veillez à créer une propriété Google Analytics 4 (GA4) pour rester au fait des dernières fonctionnalités d'analyse de Google. Une fois la configuration terminée, vous recevrez un "ID de mesure" (comme "G-XXXXXXXXXX").

Installer la bibliothèque Angular Google Analytics

Il existe plusieurs bibliothèques disponibles pour intégrer GA avec Angular, comme angular-gtag. Installez-la en utilisant npm :

npm install angular-gtag

Configurer le module Angular

Dans votre application Angular, importez la bibliothèque dans le fichier app.module.ts et ajoutez-la au tableau des importations :

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 { }

Remplacez "YOUR_MEASUREMENT_ID" par votre véritable ID de mesure GA.

Mise en œuvre du suivi dans les composants

Vous pouvez maintenant utiliser le service Gtag dans vos composants pour suivre les pages vues ou des événements spécifiques :

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 et déploiement

Après avoir mis en œuvre le code de suivi, déployez votre application. Utilisez le tableau de bord de Google Analytics pour vérifier que les données sont bien reçues. Vous pouvez également utiliser des extensions de navigateur telles que Google Analytics Debugger pour Chrome pour déboguer et vérifier le suivi.

Considérations et bonnes pratiques

  • Conformité avec les lois sur la protection de la vie privée: Soyez conscient des lois sur la protection de la vie privée, telles que le GDPR, et assurez-vous que votre application s'y conforme, notamment en obtenant le consentement de l'utilisateur pour les cookies, le cas échéant.
  • Suivi des événements personnalisés: GA permet de suivre les événements personnalisés. Identifiez les interactions clés de l'utilisateur dans votre application que vous souhaitez suivre et mettez en place un suivi des événements pour celles-ci.
  • Vérifiez régulièrement les données: Vérifiez régulièrement votre tableau de bord GA pour vous assurer que les données sont saisies correctement et pour obtenir des informations.

Réflexions finales

L'ajout de Google Analytics à votre application Angular est un moyen puissant d'obtenir des informations sur le comportement de vos utilisateurs. Cependant, Google Analytics peut parfois être trop complexe pour de nombreuses organisations.

Chez Simple Analytics, nous proposons une solution d'analyse plus simple et plus respectueuse de la vie privée, offrant une interface plus facile pour obtenir les informations dont vous avez besoin. Consultez notre tableau de bord analytique en direct pour vous en convaincre.