Stay organized with collections Save and categorize content based on your preferences.
This quickstart shows you how to add Google Analytics to your app and begin logging events.
Google Analytics collects usage and behavior data for your app. The SDK logs two primary types of information:
Analytics automatically logs some events and user properties; you don't need to add any code to enable them.
Before you beginIf you haven't already, add Firebase to your JavaScript project and make sure that Google Analytics is enabled in your Firebase project:
If you're creating a new Firebase project, enable Google Analytics during the project creation workflow.
If you're using an existing Firebase project that doesn't have Google Analytics enabled, go to the Integrations tab of your settings > Project settings to enable it.
When you enable Google Analytics in your project, your Firebase web apps are linked to Google Analytics data streams associated with an App + Web property.
Add the Analytics SDK to your appDepending on how your web application is hosted, your configuration may be handled automatically or you may need to update your Firebase configuration object. If your web app already uses Google Analytics, you may need to do additional setup described in Use Firebase with existing gtag.js tagging.
Check that your Firebase config object in your code contains measurementId
. This ID is automatically created when you enable Analytics in your Firebase project and register a web app, and it's required to use Analytics.
measurementId
when your app initializes Analytics. Having this ID in your config object is optional, but it does serve as a fallback in the rare case that the dynamic fetch fails.
If your app uses Firebase Hosting and uses reserved URLs for the Firebase SDKs:
Firebase automatically handles configuring your application. To complete setup, add the scripts from the Your apps card in your Project settings to the <body> tag of your app, if you haven't already.
If your app does not use reserved URLs: If you're working with an existing web app, update the Firebase config object in your code to ensure the measurementId
field is present. The config object should look similar to the following example:
// 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"
};
If you haven't already, install the Firebase JS SDK and initialize Firebase.
Add the Analytics JS SDK and initialize Analytics:
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 Learn more about the tree-shakeable modular web API and upgrade from the namespaced API.
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();Use Firebase with existing gtag.js tagging
If you previously had Google Analytics running in your app using the gtag.js snippet, your app may require additional setup if you plan to do one of the following:
gtag()
calls directly on the same page.gtag()
calls and Google Analytics data sent to Firebase.To ensure your events are available for use by all Firebase services, complete the following additional setup steps:
gtag('config', 'GA_MEASUREMENT_ID');
where the GA_MEASUREMENT_ID
is the measurementId
of your Firebase web app. If you have other IDs for other Analytics properties on the page, you do not need to remove their config line.firebase.analytics()
before you send any events with gtag()
.Otherwise, events sent to that ID with gtag()
calls will not be associated with Firebase and will not be available for targeting in other Firebase services.
After you have initialized the Analytics service, you can begin to log events with the logEvent()
method.
Certain events are recommended for all apps; others are recommended for specific business types or verticals. You should send suggested events along with their prescribed parameters, to ensure maximum available detail in your reports and to benefit from future features and integrations as they become available. This section demonstrates logging a pre-defined event, for more information on logging events, see Log events.
The following example demonstrates how to log a recommended event to indicate a user has received a notification in your app:
Webimport { getAnalytics, logEvent } from "firebase/analytics"; const analytics = getAnalytics(); logEvent(analytics, 'notification_received');Web
firebase.analytics().logEvent('notification_received');Next steps
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-05-08 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-08 UTC."],[],[]]
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3