Premiers pas avec Google Analytics


Ce guide de démarrage rapide vous explique comment ajouter Google Analytics à votre application et commencer à enregistrer des événements.

Google Analytics collecte des données d'utilisation et de comportement pour votre application Web. Le SDK enregistre deux principaux types d'informations :

  • Événements : tout ce qui se passe dans votre application, comme les actions des utilisateurs, les événements système ou les erreurs.

  • Propriétés utilisateur : attributs que vous définissez pour décrire des segments de votre base d'utilisateurs, comme la langue préférée ou l'emplacement géographique.

Analytics enregistre automatiquement certains événements et certaines propriétés utilisateur. Vous n'avez donc pas besoin d'ajouter de code pour les activer.

Avant de commencer

Si ce n'est pas encore fait, ajoutez Firebase à votre projet JavaScript et assurez-vous que Google Analytics est activé dans votre projet Firebase :

  • S'il s'agit d'un nouveau projet Firebase, activez Google Analytics pendant que vous le créez.

  • Si vous utilisez un projet Firebase existant où Google Analytics n'est pas activé, activez-le en accédant à l'onglet Intégrations de > Paramètres du projet.

Lorsque vous activez Google Analytics dans votre projet, vos applications Web Firebase sont associées à des flux de données Google Analytics liés à une propriété Application + Web.

Ajouter le SDK Analytics à votre application

Selon la façon dont votre application Web est hébergée, votre configuration peut être gérée automatiquement ou vous devrez peut-être mettre à jour votre objet de configuration Firebase. Si votre application Web utilise déjà Google Analytics, vous devrez peut-être effectuer une configuration supplémentaire décrite dans Utiliser Firebase avec le taggage gtag.js existant.

  1. Vérifiez que l'objet de configuration Firebase dans votre code contient measurementId. Cet ID est créé automatiquement lorsque vous activez Analytics dans votre projet Firebase et que vous enregistrez une application Web. Il est obligatoire pour utiliser Analytics.

    • Si votre application utilise Firebase Hosting et des URL réservées pour les SDK Firebase :

      Firebase configure automatiquement votre application. Pour finaliser la configuration, ajoutez les scripts de la fiche Vos applications dans vos Paramètres du projet à la balise <body> de votre application, si vous ne l'avez pas déjà fait.

    • Si votre application n'utilise pas d'URL réservées : Si vous travaillez avec une application Web existante, mettez à jour l'objet de configuration Firebase dans votre code pour vous assurer que le champ measurementId est présent. L'objet de configuration doit ressembler à l'exemple suivant :

      // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-GA_MEASUREMENT_ID"
};

  2. Si ce n'est pas déjà fait, installez le SDK JS Firebase et initialisez Firebase.

  3. Ajoutez le SDK JS Analytics et initialisez Analytics :

Web 

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Analytics and get a reference to the service
const analytics = getAnalytics(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/analytics";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Analytics and get a reference to the service
const analytics = firebase.analytics();

Utiliser Firebase avec le taggage gtag.js existant

Si vous avez déjà exécuté Google Analytics dans votre application à l'aide de l'extrait gtag.js, il est possible que votre application nécessite une configuration supplémentaire si vous prévoyez d'effectuer l'une des actions suivantes :

  • Ajoutez des appels Google Analytics depuis Firebase à la page, mais prévoyez également de continuer à utiliser les appels gtag() directement sur la même page.
  • Vous souhaitez utiliser le même ID de mesure entre les appels gtag() directs et les données Google Analytics envoyées à Firebase.

Pour vous assurer que vos événements sont disponibles pour tous les services Firebase, suivez les étapes de configuration supplémentaires ci-dessous :

  • Supprimez la ligne gtag('config', 'GA_MEASUREMENT_ID');, où GA_MEASUREMENT_ID correspond à measurementId de votre application Web Firebase. Si d'autres ID de propriétés Analytics sont présents sur la page, vous n'avez pas besoin de supprimer leur ligne de configuration.
  • Assurez-vous d'appeler firebase.analytics() avant d'envoyer des événements avec gtag().

Sinon, les événements envoyés à cet ID avec des appels gtag() ne seront pas associés à Firebase et ne seront pas disponibles pour le ciblage dans d'autres services Firebase.

Commencer à enregistrer des événements

Après avoir initialisé le service Analytics, vous pouvez commencer à enregistrer des événements avec la méthode logEvent().

Certains événements sont recommandés pour toutes les applications, tandis que d'autres le sont pour des types ou secteurs d'activité spécifiques. Vous devez envoyer les événements suggérés avec leurs paramètres prescrits pour obtenir le plus de détails possible dans vos rapports, et profiter des futures fonctionnalités et intégrations dès qu'elles seront disponibles. Cette section montre comment consigner un événement prédéfini. Pour en savoir plus sur la consignation d'événements, consultez Consigner des événements.

L'exemple suivant montre comment consigner un événement recommandé pour indiquer qu'un utilisateur a reçu une notification dans votre application :

Web

import { getAnalytics, logEvent } from "firebase/analytics";

const analytics = getAnalytics();
logEvent(analytics, 'notification_received');
analytics_log_event.js

Web

firebase.analytics().logEvent('notification_received');
index.js

Étapes suivantes