Ce guide de démarrage rapide vous montre 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 : ce qui se passe dans votre application, comme les actions de l'utilisateur, les événements système ou les erreurs.
Propriétés de l'utilisateur : attributs que vous définissez pour décrire des segments de votre base d'utilisateurs, tels que la préférence linguistique ou l'emplacement géographique.
Avant que tu commences
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 nouveau projet Firebase, activez Google Analytics lors du workflow de création de projet.
Si vous utilisez un projet Firebase existant pour lequel Google Analytics n'est pas activé, accédez à l'onglet Intégrations de vos > Paramètres du projet pour l'activer.
Lorsque vous activez Google Analytics dans votre projet, vos applications Web Firebase sont lié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 balisage gtag.js existant .
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, et il est nécessaire 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 carte Vos applications dans les paramètres de votre 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" };
Si vous ne l'avez pas déjà fait, installez le SDK Firebase JS et initialisez Firebase .
Ajoutez le SDK Analytics JS et initialisez Analytics :
Web version 9
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 version 8
import firebase from "firebase/app"; import "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 firebase.initializeApp(firebaseConfig); // Initialize Analytics and get a reference to the service const analytics = firebase.analytics();
Utiliser Firebase avec le balisage gtag.js existant
Si Google Analytics s'exécutait auparavant dans votre application à l'aide de l'extrait de code gtag.js , votre application peut nécessiter une configuration supplémentaire si vous prévoyez d'effectuer l'une des actions suivantes :
- Ajoutez les appels Google Analytics de Firebase à la page, mais prévoyez également de continuer à utiliser
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 peuvent être utilisés par 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'ID demeasurementId
de votre application Web Firebase. Si vous avez d'autres identifiants pour d'autres propriétés Analytics 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 avecgtag()
.
Sinon, les événements envoyés à cet ID avec gtag()
ne seront pas associés à Firebase et ne seront pas disponibles pour le ciblage dans d'autres services Firebase.
Commencer à consigner les événements
Certains événements sont recommandés pour toutes les applications ; d'autres sont recommandés pour des types d'entreprises ou des secteurs verticaux spécifiques. Vous devez envoyer des événements suggérés avec leurs paramètres prescrits, afin de garantir un maximum de détails disponibles dans vos rapports et de bénéficier des futures fonctionnalités et intégrations dès qu'elles seront disponibles. Cette section illustre la journalisation d'un événement prédéfini. Pour plus d'informations sur la journalisation des événements, consultez 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 version 9
import { getAnalytics, logEvent } from "firebase/analytics"; const analytics = getAnalytics(); logEvent(analytics, 'notification_received');
Web version 8
firebase.analytics().logEvent('notification_received');
Prochaines étapes
- Utilisez DebugView pour vérifier vos événements.
- Explorez vos données dans la console Firebase .
- Explorez les guides sur les événements et les propriétés utilisateur.
- Découvrez comment exporter vos données vers BigQuery.
Ce guide de démarrage rapide vous montre 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 : ce qui se passe dans votre application, comme les actions de l'utilisateur, les événements système ou les erreurs.
Propriétés de l'utilisateur : attributs que vous définissez pour décrire des segments de votre base d'utilisateurs, tels que la préférence linguistique ou l'emplacement géographique.
Avant que tu commences
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 nouveau projet Firebase, activez Google Analytics lors du workflow de création de projet.
Si vous utilisez un projet Firebase existant pour lequel Google Analytics n'est pas activé, accédez à l'onglet Intégrations de vos > Paramètres du projet pour l'activer.
Lorsque vous activez Google Analytics dans votre projet, vos applications Web Firebase sont lié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 balisage gtag.js existant .
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, et il est nécessaire 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 carte Vos applications dans les paramètres de votre 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" };
Si vous ne l'avez pas déjà fait, installez le SDK Firebase JS et initialisez Firebase .
Ajoutez le SDK Analytics JS et initialisez Analytics :
Web version 9
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 version 8
import firebase from "firebase/app"; import "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 firebase.initializeApp(firebaseConfig); // Initialize Analytics and get a reference to the service const analytics = firebase.analytics();
Utiliser Firebase avec le balisage gtag.js existant
Si Google Analytics s'exécutait auparavant dans votre application à l'aide de l'extrait de code gtag.js , votre application peut nécessiter une configuration supplémentaire si vous prévoyez d'effectuer l'une des actions suivantes :
- Ajoutez les appels Google Analytics de Firebase à la page, mais prévoyez également de continuer à utiliser
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 peuvent être utilisés par 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'ID demeasurementId
de votre application Web Firebase. Si vous avez d'autres identifiants pour d'autres propriétés Analytics 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 avecgtag()
.
Sinon, les événements envoyés à cet ID avec gtag()
ne seront pas associés à Firebase et ne seront pas disponibles pour le ciblage dans d'autres services Firebase.
Commencer à consigner les événements
Certains événements sont recommandés pour toutes les applications ; d'autres sont recommandés pour des types d'entreprises ou des secteurs verticaux spécifiques. Vous devez envoyer des événements suggérés avec leurs paramètres prescrits, afin de garantir un maximum de détails disponibles dans vos rapports et de bénéficier des futures fonctionnalités et intégrations dès qu'elles seront disponibles. Cette section illustre la journalisation d'un événement prédéfini. Pour plus d'informations sur la journalisation des événements, consultez 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 version 9
import { getAnalytics, logEvent } from "firebase/analytics"; const analytics = getAnalytics(); logEvent(analytics, 'notification_received');
Web version 8
firebase.analytics().logEvent('notification_received');
Prochaines étapes
- Utilisez DebugView pour vérifier vos événements.
- Explorez vos données dans la console Firebase .
- Explorez les guides sur les événements et les propriétés utilisateur.
- Découvrez comment exporter vos données vers BigQuery.