Premiers pas avec Google Analytics pour le Web

Sélectionnez une plate-forme : iOS+ Android Web Flutter Unity C++


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

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

  • Événements : ce qui se passe dans votre application (actions des utilisateurs, événements système ou erreurs, par exemple).

  • Propriétés utilisateur : attributs que vous définissez pour décrire des segments de votre base d'utilisateurs, comme les préférences de langue 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 déjà 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é, vous pouvez l'activer dans l'onglet Paramètres > Intégrations.

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, comme décrit dans Utiliser Firebase avec un taggage gtag.js existant.

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

    • Si votre application utilise Firebase Hosting et 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 ce n'est pas déjà fait.

    • Si votre application n'utilise pas d'URL réservées : Si vous utilisez 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"
};
      1. Si ce n'est pas déjà fait, installez le SDK JS Firebase et initialisez Firebase. 2. 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 des balises gtag.js existantes

Si vous utilisiez déjà Google Analytics dans votre application à l'aide de l'extrait gtag.js, vous devrez peut-être effectuer une configuration supplémentaire si vous prévoyez d'effectuer l'une des opérations suivantes :

  • Ajoutez des appels Google Analytics de Firebase à 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 pour 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 suivantes :

  • Supprimez la ligne gtag('config', 'GA_MEASUREMENT_ID');, où GA_MEASUREMENT_ID est l'measurementId de votre application Web Firebase. Si la page contient d'autres ID pour d'autres propriétés Analytics, 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 seront pas disponibles pour le ciblage dans d'autres services Firebase.

Commencer à enregistrer des événements

Une fois que vous avez initialisé le service Analytics, vous pouvez commencer à consigner des événements avec 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é 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 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');

Web

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

Étapes suivantes