How to Use Firebase Analytics in a Web App

1// Install: npm install firebase
2
3import { initializeApp } from 'firebase/app';
4import { getAnalytics, isSupported } from 'firebase/analytics';
5
6const firebaseConfig = {
7  apiKey: 'YOUR_API_KEY',
8  authDomain: 'YOUR_PROJECT.firebaseapp.com',
9  projectId: 'YOUR_PROJECT',
10  storageBucket: 'YOUR_PROJECT.appspot.com',
11  messagingSenderId: '123456789',
12  appId: '1:123456789:web:abc123',
13  measurementId: 'G-XXXXXXXXXX',
14};
15
16const app = initializeApp(firebaseConfig);
17
18// Check if analytics is supported (fails in SSR/Node.js)
19const analytics = await isSupported().then((yes) =>
20  yes ? getAnalytics(app) : null
21);

1// These events are collected AUTOMATICALLY — no code needed:
2// page_view        — fires on every page load
3// session_start    — fires when a new session begins
4// first_visit      — fires the first time a user visits
5// user_engagement  — fires when the app is in the foreground
6// scroll           — fires when user scrolls past 90% of page
7// click            — fires on outbound link clicks
8// file_download    — fires when user clicks a download link
9// video_start      — fires when an embedded video starts playing
10
11// Enhanced measurement (enabled by default) handles most of these.
12// You can toggle specific enhanced events in the Firebase Console:
13// Analytics > Admin > Data Streams > Web > Enhanced measurement

1import { getAnalytics, setConsent } from 'firebase/analytics';
2
3// Set default consent state BEFORE initializing Analytics
4setConsent({
5  analytics_storage: 'denied',
6  ad_storage: 'denied',
7  ad_user_data: 'denied',
8  ad_personalization: 'denied',
9});
10
11const analytics = getAnalytics(app);
12
13// When the user accepts cookies, update consent
14function onUserAcceptsCookies() {
15  setConsent({
16    analytics_storage: 'granted',
17    ad_storage: 'granted',
18    ad_user_data: 'granted',
19    ad_personalization: 'granted',
20  });
21}

1// Option 1: Set the global debug flag before Firebase init
2(window as any).self.FIREBASE_ANALYTICS_DEBUG_MODE = true;
3
4// Option 2: Use the Google Analytics Debugger Chrome extension
5// Install from Chrome Web Store and toggle it on
6
7// Option 3: Add a URL parameter to your app
8// Visit: http://localhost:3000?debug_mode=true
9
10// Then open Firebase Console > Analytics > DebugView
11// Events appear in real time as you interact with your app

1// For Next.js App Router — use a client component
2'use client';
3
4import { useEffect, useState } from 'react';
5import { getAnalytics, isSupported, Analytics } from 'firebase/analytics';
6import { app } from '@/lib/firebase';
7
8export function AnalyticsProvider({ children }: { children: React.ReactNode }) {
9  const [analytics, setAnalytics] = useState<Analytics | null>(null);
10
11  useEffect(() => {
12    isSupported().then((supported) => {
13      if (supported) {
14        setAnalytics(getAnalytics(app));
15      }
16    });
17  }, []);
18
19  return <>{children}</>;
20}