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

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
};

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

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

Hint

Import getAnalytics and call it with the Firebase app instance.

Practice

1. What is the main purpose of integrating Google Analytics with Firebase?

easy

A. To host static website files

B. To track user behavior and app usage data

C. To store user passwords securely

D. To send emails to users automatically

Solution

1. Step 1: Understand Google Analytics role

   Google Analytics collects data about how users interact with your app or website.

2. Step 2: Match with Firebase integration purpose

   Firebase uses Google Analytics to provide insights on user behavior and app performance.

3. Final Answer:

   To track user behavior and app usage data -> Option B

4. Quick Check:

   Analytics tracks user behavior = C [OK]

Hint: Analytics means tracking user actions and app usage [OK]

Common Mistakes:

• Confusing analytics with security or hosting
• Thinking analytics sends emails
• Assuming analytics stores passwords

2. Which Firebase CLI command initializes Google Analytics integration in your project?

easy

A. firebase deploy analytics

B. firebase start analytics

C. firebase init analytics

D. firebase enable analytics

Solution

1. Step 1: Recall Firebase CLI commands

   The command to start setup for analytics is 'firebase init analytics'.

2. Step 2: Differentiate from deploy and other commands

   'firebase deploy' applies changes, but does not initialize. 'start' and 'enable' are not valid commands for this.

3. Final Answer:

   firebase init analytics -> Option C

4. Quick Check:

   Initialization uses 'init' command = B [OK]

Hint: Init means start setup; deploy means apply changes [OK]

Common Mistakes:

• Using deploy instead of init to start analytics
• Assuming 'start' or 'enable' commands exist
• Confusing initialization with deployment

3. Given this Firebase Analytics setup snippet, what will be the output in the Firebase console?

firebase init analytics
firebase deploy

medium

A. Google Analytics will be enabled and data collection starts

B. An error will occur because deploy must come before init

C. No changes happen until you manually enable analytics in console

D. The app will crash due to missing configuration

Solution

1. Step 1: Understand command order

   'firebase init analytics' sets up analytics configuration, then 'firebase deploy' applies it.

2. Step 2: Effect on Firebase console

   After deploy, Google Analytics is enabled and starts collecting data visible in the console.

3. Final Answer:

   Google Analytics will be enabled and data collection starts -> Option A

4. Quick Check:

   Init then deploy enables analytics = D [OK]

Hint: Init first, then deploy to enable analytics [OK]

Common Mistakes:

• Thinking deploy must come before init
• Believing manual console enable is required after deploy
• Assuming app crashes without extra config

4. You ran firebase init analytics but forgot to run firebase deploy. What issue will you face?

medium

A. Analytics setup changes won't apply, no data collected

B. Firebase will automatically deploy changes after init

C. Your app will show errors on startup

D. Analytics will collect data but not show in console

Solution

1. Step 1: Understand init vs deploy roles

   'firebase init analytics' prepares config files locally but does not apply them to Firebase project.

2. Step 2: Effect of missing deploy

   Without 'firebase deploy', changes are not sent to Firebase servers, so analytics is not enabled and no data is collected.

3. Final Answer:

   Analytics setup changes won't apply, no data collected -> Option A

4. Quick Check:

   Deploy applies changes; missing deploy means no effect [OK]

Hint: Init prepares; deploy applies changes to Firebase [OK]

Common Mistakes:

• Assuming init auto-deploys changes
• Expecting app errors without deploy
• Thinking data collects without deploy

5. You want to track a custom event named purchase_complete in your Firebase app using Google Analytics. Which step is necessary after enabling Analytics with firebase init analytics and firebase deploy?

hard

A. No extra step needed; all events are tracked automatically

B. Manually add purchase_complete in Firebase console event list

C. Restart Firebase project to activate custom events

D. Add code in your app to log the purchase_complete event

Solution

1. Step 1: Recognize default vs custom events

   Firebase Analytics tracks some default events automatically, but custom events require explicit logging in app code.

2. Step 2: Implement custom event logging

   You must add code in your app to log the 'purchase_complete' event so Firebase can record it.

3. Final Answer:

   Add code in your app to log the purchase_complete event -> Option D

4. Quick Check:

   Custom events need app code logging = A [OK]

Hint: Custom events require explicit logging in app code [OK]

Common Mistakes:

• Expecting console to add custom events automatically
• Thinking restart activates events
• Assuming all events tracked without code