Empieza a usar Google Analytics

Este inicio rápido le muestra cómo agregar Google Analytics a su aplicación y comenzar a registrar eventos.

Google Analytics recopila datos de uso y comportamiento de su aplicación web. El SDK registra dos tipos principales de información:

  • Eventos : lo que sucede en su aplicación, como acciones del usuario, eventos del sistema o errores.

  • Propiedades de usuario : atributos que usted define para describir segmentos de su 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 agregar ningún código para habilitarlos.

Antes de que empieces

Si aún no lo has hecho, agrega Firebase a tu proyecto de JavaScript y asegúrate de que Google Analytics esté habilitado en tu proyecto de Firebase:

  • Si estás creando un nuevo proyecto de Firebase, habilita Google Analytics durante el flujo de trabajo de creación del proyecto.

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

Cuando habilitas Google Analytics en tu proyecto, tus aplicaciones web de Firebase se vinculan a flujos de datos de Google Analytics asociados con una propiedad App + Web .

Agregue el SDK de Analytics a su aplicación

Dependiendo de cómo esté alojada su aplicación web, su configuración puede manejarse automáticamente o puede que necesite actualizar su objeto de configuración de Firebase . Si su aplicación web ya utiliza Google Analytics, es posible que deba realizar una configuración adicional que se describe en Usar Firebase con el etiquetado gtag.js existente .

  1. Verifique que su objeto de configuración de Firebase en su código contenga measurementId . Esta ID se crea automáticamente cuando habilitas Analytics en tu proyecto de Firebase y registras una aplicación web, y es necesaria para usar Analytics.

    • Si tu aplicación usa Firebase Hosting y usa URL reservadas para los SDK de Firebase :

      Firebase maneja automáticamente la configuración de su aplicación. Para completar la configuración, agregue los scripts de la tarjeta Sus aplicaciones en la configuración de su Proyecto a la etiqueta <body> de su aplicación, si aún no lo ha hecho.

    • Si su aplicación no usa URL reservadas : si está trabajando con una aplicación web existente , actualice el objeto de configuración de Firebase en su código para asegurarse de que el campo measurementId esté presente. El objeto de configuración debería 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 e inicializa Firebase .

  3. Agregue el SDK de Analytics JS e inicialice 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();

Usar Firebase con el etiquetado gtag.js existente

Si anteriormente tenías Google Analytics ejecutándose en tu aplicación usando el fragmento de gtag.js , es posible que tu aplicación requiera configuración adicional si planeas realizar una de las siguientes acciones:

  • Agregue llamadas de Google Analytics desde Firebase a la página, pero también planee continuar usando llamadas gtag() directamente en la misma página.
  • Quiere utilizar el mismo ID de medición entre las llamadas directas gtag() y los datos de Google Analytics enviados a Firebase.

Para garantizar que sus eventos estén disponibles para que todos los servicios de Firebase los utilicen, complete los siguientes pasos de configuración adicionales:

  • Elimine la línea gtag('config', ' GA_MEASUREMENT_ID '); donde GA_MEASUREMENT_ID es el measurementId de su aplicación web Firebase. Si tiene otros ID para otras propiedades de Analytics en la página, no es necesario que elimine su línea de configuración.
  • Asegúrate de llamar firebase.analytics() antes de enviar cualquier evento con gtag() .

De lo contrario, los eventos enviados a ese ID con llamadas gtag() no se asociarán con Firebase y no estarán disponibles para su segmentación en otros servicios de Firebase.

Comenzar a registrar eventos

Una vez que haya inicializado el servicio Analytics , puede comenzar a registrar eventos con el método logEvent() .

Se recomiendan ciertos eventos para todas las aplicaciones ; otros se recomiendan para tipos de negocios o verticales específicos. Debe enviar eventos sugeridos junto con sus parámetros prescritos, para garantizar el máximo detalle disponible en sus informes y beneficiarse de futuras funciones e integraciones a medida que estén disponibles. Esta sección muestra el registro de un evento predefinido; para obtener más información sobre el registro de eventos, consulte Registrar eventos .

El siguiente ejemplo demuestra cómo registrar un evento recomendado para indicar que un usuario recibió una notificación en su aplicación:

Web modular API

import { getAnalytics, logEvent } from "firebase/analytics";

const analytics = getAnalytics();
logEvent(analytics, 'notification_received');
analytics_log_event.js

Web namespaced API

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

Próximos pasos