Premiers pas avec Google Analytics


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

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

  • Événements: tout ce qui se passe dans votre application, comme les actions de l'utilisateur, 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 préférence linguistique ou l'emplacement géographique.

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

Avant de commencer

Si vous ne l'avez pas déjà fait, ajoutez Firebase à votre projet JavaScript et assurez-vous que Google Analytics est activé dans votre projet Firebase:

  • Si vous créez un projet Firebase, activez Google Analytics au cours du workflow de création du projet.

  • Si vous utilisez un projet Firebase existant pour lequel Google Analytics n'est pas activé, accédez à l'onglet Integrations (Intégrations) de  > Project settings (Paramètres du projet) pour l'activer.

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

Ajouter le SDK Analytics à votre application

Selon la manière 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 votre objet de configuration Firebase dans votre code contient measurementId. Cet ID est automatiquement créé lorsque vous activez Analytics dans votre projet Firebase et enregistrez une application Web. Il est obligatoire pour utiliser Analytics.

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

      Firebase gère automatiquement la configuration de votre application. Pour terminer la configuration, ajoutez les scripts de la fiche Vos applications dans les 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: "AIzaSyCGQ0tYppWFJkuSxBhOpkH0xVDmX245Vdc",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "637908496727",
  appId: "2:637908496727:web:a4284b4c99e329d5",
  measurementId: "G-9VP01NDSXJ"
};

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

  3. Ajoutez le SDK JavaScript 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 exécutiez déjà Google Analytics dans votre application à l'aide de l'extrait gtag.js, votre application peut nécessiter une configuration supplémentaire si vous prévoyez de procéder à l'une des opérations suivantes:

  • Ajoutez des appels Google Analytics à partir de Firebase sur la page, mais prévoyez également de continuer à utiliser des 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 tous les services Firebase peuvent utiliser vos événements, procédez comme suit:

  • Supprimez la ligne gtag('config', 'GA_MEASUREMENT_ID');, où GA_MEASUREMENT_ID correspond à l'measurementId de votre application Web Firebase. Si vous avez d'autres ID pour d'autres propriétés Analytics sur la page, vous n'avez pas besoin de supprimer leur ligne de configuration.
  • Veillez à 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 pourront pas être ciblés dans d'autres services Firebase.

Démarrer la journalisation des événements

Une fois que vous avez initialisé le service Analytics, vous pouvez commencer à consigner des événements à l'aide de la méthode logEvent().

Certains événements sont recommandés pour toutes les applications, tandis que d'autres sont recommandés pour des types d'activités ou des secteurs 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 explique comment consigner un événement prédéfini. Pour en savoir plus sur la journalisation des événements, consultez la section Journaliser les é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