Comienza a usar Google Analytics


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 web. 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 del usuario: Los atributos que defines para describir segmentos de la 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 del proyecto.

  • Si usas un proyecto de Firebase existente que no tiene habilitado Google Analytics, ve a la pestaña Integraciones de tu > Configuración del proyecto para habilitarlo.

Cuando habilitas Google Analytics en tu proyecto, las apps web de Firebase se vinculan a los flujos de datos de Google Analytics asociados 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.

  1. 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 usa URL 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"
};

  2. Si aún no lo has hecho, instala el SDK de Firebase JS y, luego, inicializa Firebase.

  3. Agrega el SDK de Analytics JS y, luego, inicializa 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();

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 que GA_MEASUREMENT_ID es el measurementId 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 con gtag().

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:

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

Próximos pasos