En esta guía de inicio rápido, aprenderás cómo agregar Google Analytics a tu app y comenzar a registrar eventos.
Google Analytics recopila datos de uso y comportamiento de tu app. El SDK registra dos tipos principales de información:
- Eventos: Lo que sucede en la app, como las acciones de los usuarios, los eventos del sistema o los errores.
- Propiedades de usuario: Los atributos que defines para describir segmentos de tu base de usuarios, como la preferencia de idioma o la ubicación geográfica.
Analytics registra automáticamente algunos eventos y propiedades del usuario; no es necesario que agregues código para habilitarlos.
Antes de comenzar
Si aún no lo has hecho, agrega Firebase a tu proyecto de JavaScript y asegúrate de que Google Analytics esté habilitado en el proyecto de Firebase:
Si quieres crear un nuevo proyecto de Firebase, habilita Google Analytics durante el flujo de trabajo de creación.
Si usas un proyecto de Firebase existente que no tiene habilitado Google Analytics, ve a la pestaña Integraciones de
para habilitarlo. > Configuración del proyecto
Cuando habilitas Google Analytics en tu proyecto, las aplicaciones web de Firebase se vinculan a los flujos de datos de Google Analytics que se asociaron con una propiedad App + Web.
Agrega el SDK de Analytics a tu app
En función de cómo esté alojada tu aplicación web, es posible que la configuración se controle automáticamente o que debas actualizar tu objeto de configuración de Firebase. Si tu app web ya usa Google Analytics, es posible que debas aplicar la configuración adicional que se describe en Usa Firebase con el etiquetado gtag.js existente.
Verifica que el objeto de configuración de Firebase en tu código contenga
measurementId
. Este ID se crea automáticamente cuando habilitas Analytics en el proyecto de Firebase y registras una app web, y se necesita para usar Analytics.Si tu app usa Firebase Hosting y URLs reservadas para los SDK de Firebase:
Firebase controla automáticamente la configuración de la app. Para completar la configuración, agrega las secuencias de comandos de la tarjeta Tus apps de la Configuración del proyecto a la etiqueta <body> de la app (si aún no lo has hecho).
Si la app no usa URLs reservadas y trabajas con una app web existente, actualiza el objeto de configuración de Firebase en tu código para asegurarte de que esté presente el campo
measurementId
. El objeto de configuración debe ser similar al siguiente ejemplo:// 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 aún no lo has hecho, instala el SDK de Firebase JS y, luego, inicializa Firebase.
Agrega el SDK de Analytics JS y, luego, inicializa Analytics:
API modular 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);
API con espacio de nombres 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();
Usa Firebase con el etiquetado gtag.js existente
Si antes ejecutabas Google Analytics en tu app con el fragmento gtag.js, es posible que tu app requiera una configuración adicional si piensas realizar una de las siguientes acciones:
- Agregar llamadas de Google Analytics desde Firebase a la página, pero también planeas seguir usando llamadas a
gtag()
directamente en la misma página - Utilizar el mismo ID de medición entre las llamadas directas de
gtag()
y los datos de Google Analytics enviados a Firebase
A fin de garantizar que tus eventos estén disponibles para que los utilicen todos los servicios de Firebase, completa los siguientes pasos de configuración adicionales:
- Quita la línea
gtag('config', 'GA_MEASUREMENT_ID');
en la queGA_MEASUREMENT_ID
es elmeasurementId
de tu aplicación web de Firebase. Si tienes IDs de otras propiedades de Analytics en la página, no es necesario que quites su línea de configuración. - Asegúrate de llamar a
firebase.analytics()
antes de enviar eventos congtag()
.
De lo contrario, los eventos enviados a ese ID con llamadas de gtag()
no se asociarán con Firebase y no estarán disponibles como destino en otros servicios de Firebase.
Comienza a registrar eventos
Después de inicializar el
servicio de Analytics, puedes
comenzar a registrar eventos con el
método
logEvent()
.
Algunos eventos se recomiendan para todas las apps; otros se recomiendan para verticales o tipos de empresas específicos. Debes enviar los eventos sugeridos junto con sus parámetros prescritos a fin de asegurarte de tener la mayor cantidad posible de detalles en tus informes y aprovechar las integraciones y funciones futuras cuando estén disponibles. En esta sección, se muestra cómo registrar un evento predefinido. Para obtener más información sobre el registro de eventos, consulta Registra eventos.
En el siguiente ejemplo, se muestra cómo registrar un evento recomendado para indicar que un usuario recibió una notificación en tu app:
API modular web
import { getAnalytics, logEvent } from "firebase/analytics"; const analytics = getAnalytics(); logEvent(analytics, 'notification_received');
API con espacio de nombres web
firebase.analytics().logEvent('notification_received');
Próximos pasos
- Usa DebugView para verificar los eventos.
- Explora los datos en Firebase console.
- Explora las guías sobre los eventos y las propiedades del usuario.
- Obtén información sobre cómo exportar datos a BigQuery.