How to Track Custom Events in Firebase Analytics

1import { initializeApp } from 'firebase/app';
2import { getAnalytics } from 'firebase/analytics';
3
4const firebaseConfig = {
5  apiKey: 'YOUR_API_KEY',
6  authDomain: 'YOUR_PROJECT.firebaseapp.com',
7  projectId: 'YOUR_PROJECT',
8  storageBucket: 'YOUR_PROJECT.appspot.com',
9  messagingSenderId: '123456789',
10  appId: '1:123456789:web:abc123',
11  measurementId: 'G-XXXXXXXXXX',
12};
13
14const app = initializeApp(firebaseConfig);
15const analytics = getAnalytics(app);

1import { logEvent } from 'firebase/analytics';
2
3// Track when a user completes onboarding
4logEvent(analytics, 'onboarding_complete', {
5  method: 'email',
6  step_count: 4,
7});
8
9// Track a button click with context
10logEvent(analytics, 'cta_click', {
11  button_name: 'upgrade_plan',
12  page: 'pricing',
13});

1import { logEvent } from 'firebase/analytics';
2
3// Recommended: track a purchase with standard parameters
4logEvent(analytics, 'purchase', {
5  transaction_id: 'TXN_12345',
6  value: 29.99,
7  currency: 'USD',
8  items: [
9    { item_id: 'plan_pro', item_name: 'Pro Plan', price: 29.99 },
10  ],
11});
12
13// Recommended: track sign-up method
14logEvent(analytics, 'sign_up', {
15  method: 'Google',
16});

1import { setUserProperties } from 'firebase/analytics';
2
3// Set user properties after sign-in
4setUserProperties(analytics, {
5  plan_type: 'pro',
6  signup_source: 'landing_page',
7});

1// Option 1: Enable debug mode programmatically
2// Add this before initializing analytics
3(window as any).self.FIREBASE_ANALYTICS_DEBUG_MODE = true;
4
5// Option 2: Use URL parameter
6// Navigate to your app with ?debug_mode=true
7// Example: http://localhost:3000?debug_mode=true

1import { Analytics, logEvent } from 'firebase/analytics';
2
3type AppEvent =
4  | { name: 'onboarding_complete'; params: { method: string; step_count: number } }
5  | { name: 'cta_click'; params: { button_name: string; page: string } }
6  | { name: 'feature_used'; params: { feature: string; duration_ms?: number } };
7
8export function trackEvent(analytics: Analytics, event: AppEvent) {
9  logEvent(analytics, event.name, event.params);
10}
11
12// Usage
13trackEvent(analytics, {
14  name: 'feature_used',
15  params: { feature: 'dark_mode', duration_ms: 1200 },
16});