Google Analytics integration in Firebase - Mini Project: Build & Apply

Google Analytics Integration with Firebase

📖 Scenario: You are building a mobile app and want to track user behavior using Google Analytics through Firebase. This will help you understand how users interact with your app.

🎯 Goal: Set up Google Analytics integration in a Firebase project by configuring the Firebase initialization code with Analytics enabled.

📋 What You'll Learn

Create a Firebase configuration object with the exact given keys and values

Add a variable to enable Google Analytics in the Firebase config

Initialize Firebase app with the configuration object

Initialize Google Analytics service from the Firebase app

💡 Why This Matters

🌍 Real World

Google Analytics integration helps app developers understand user behavior and improve app experience by tracking usage data.

💼 Career

Many cloud and mobile developer roles require setting up analytics to monitor app performance and user engagement.

1

Create Firebase configuration object

Create a constant called firebaseConfig with the following exact key-value pairs: apiKey set to "AIzaSyD-EXAMPLEKEY1234567890", authDomain set to "your-app.firebaseapp.com", projectId set to "your-app", storageBucket set to "your-app.appspot.com", messagingSenderId set to "1234567890", and appId set to "1:1234567890:web:abcdef123456".

Firebase

# Your code here

Need a hint?

Use a JavaScript object with the exact keys and values as shown.

2

Enable Google Analytics in Firebase config

Add a new key measurementId to the existing firebaseConfig object and set its value to "G-ABCDEFG123" to enable Google Analytics.

Firebase

const firebaseConfig = {
  apiKey: "AIzaSyD-EXAMPLEKEY1234567890",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456",
  // Add measurementId here
};

Need a hint?

Add the measurementId key inside the firebaseConfig object.

3

Initialize Firebase app

Import initializeApp from firebase/app and create a constant called app by calling initializeApp(firebaseConfig).

Firebase

// Import initializeApp from firebase/app
// Initialize Firebase app with firebaseConfig
# Your code here

Need a hint?

Use ES module import syntax and call initializeApp with the config object.

4

Initialize Google Analytics service

Import getAnalytics from firebase/analytics and create a constant called analytics by calling getAnalytics(app).

Firebase

import { initializeApp } from "firebase/app";
// Import getAnalytics from firebase/analytics

const firebaseConfig = {
  apiKey: "AIzaSyD-EXAMPLEKEY1234567890",
  authDomain: "your-app.firebaseapp.com",
  projectId: "your-app",
  storageBucket: "your-app.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef123456",
  measurementId: "G-ABCDEFG123"
};

const app = initializeApp(firebaseConfig);
// Initialize analytics service
# Your code here

Need a hint?

Import getAnalytics and call it with the Firebase app instance.