How to Set Up Firebase Analytics Quickly and Easily

To set up Firebase Analytics, add Firebase to your app, include the firebase-analytics SDK, and initialize it in your app code. Then, Firebase automatically tracks basic user events and you can log custom events using logEvent().

Syntax

Setting up Firebase Analytics involves these key parts:

• Adding Firebase SDK: Include the firebase-analytics library in your project.
• Initializing Firebase: Initialize Firebase in your app code to start analytics.
• Logging Events: Use logEvent(analytics, eventName, params) to track custom user actions.

javascript

import { initializeApp } from 'firebase/app';
import { getAnalytics, logEvent } from 'firebase/analytics';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_SENDER_ID',
  appId: 'YOUR_APP_ID',
  measurementId: 'YOUR_MEASUREMENT_ID'
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

// Log a custom event
logEvent(analytics, 'select_content', { content_type: 'image', item_id: 'P12453' });

Example

This example shows how to set up Firebase Analytics in a web app and log a custom event when a user clicks a button.

javascript

import { initializeApp } from 'firebase/app';
import { getAnalytics, logEvent } from 'firebase/analytics';

const firebaseConfig = {
  apiKey: 'AIzaSyExampleKey',
  authDomain: 'example-app.firebaseapp.com',
  projectId: 'example-app',
  storageBucket: 'example-app.appspot.com',
  messagingSenderId: '1234567890',
  appId: '1:1234567890:web:abcdef123456',
  measurementId: 'G-ABCDEFGHJK'
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

// Function to log event on button click
function onButtonClick() {
  logEvent(analytics, 'button_click', { button_name: 'subscribe' });
  console.log('Event logged: button_click');
}

// Simulate button click
onButtonClick();

Output

Event logged: button_click

Common Pitfalls

Common mistakes when setting up Firebase Analytics include:

• Not including the firebase-analytics SDK in your project dependencies.
• Forgetting to initialize Firebase with the correct configuration.
• Logging events before Firebase Analytics is initialized.
• Using incorrect event names or parameters that do not follow Firebase's naming rules.
• Not enabling Google Analytics in the Firebase console.

javascript

/* Wrong: Logging event before initialization */
// const analytics = getAnalytics(app); // analytics is undefined here
logEvent(analytics, 'page_view');

/* Right: Initialize first, then log event */
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
logEvent(analytics, 'page_view');

Quick Reference

Here is a quick checklist to set up Firebase Analytics:

Step	Description
1	Create a Firebase project in the Firebase console.
2	Add your app (iOS, Android, or Web) to the project.
3	Download and add the Firebase config file to your app.
4	Install the firebase-analytics SDK in your project.
5	Initialize Firebase in your app code with your config.
6	Use logEvent() to track custom events.
7	Check events in Firebase console Analytics dashboard.

Key Takeaways

Add and initialize Firebase Analytics SDK before logging events.

Use logEvent() to track custom user actions clearly.

Ensure your Firebase project has Google Analytics enabled.

Follow Firebase naming rules for event names and parameters.

Verify events appear in the Firebase Analytics dashboard after setup.