Custom events in Firebase - Mini Project: Build & Apply

Tracking Custom Events with Firebase Analytics

📖 Scenario: You are building a simple web app that tracks user actions using Firebase Analytics. You want to record a custom event when users click a special button.

🎯 Goal: Create a Firebase Analytics setup that logs a custom event named special_button_click with a parameter button_color indicating the color of the clicked button.

📋 What You'll Learn

Initialize Firebase Analytics in your app

Create a variable for the button color

Write a function to log the custom event special_button_click with the button_color parameter

Call the event logging function when the button is clicked

💡 Why This Matters

🌍 Real World

Custom events help track specific user actions in apps, giving insights into user behavior beyond standard analytics.

💼 Career

Knowing how to implement custom events with Firebase Analytics is valuable for roles in app development, product management, and data analysis.

1

Initialize Firebase Analytics

Write the code to initialize Firebase Analytics by importing getAnalytics from firebase/analytics and creating a constant called analytics using getAnalytics().

Firebase

# Your code here to import and initialize Firebase Analytics

Hint

Use import { getAnalytics } from "firebase/analytics"; and then const analytics = getAnalytics();

2

Create a variable for button color

Create a constant variable called buttonColor and set it to the string "red".

Firebase

import { getAnalytics } from "firebase/analytics";
const analytics = getAnalytics();

# Create a constant called buttonColor with value "red"

Hint

Use const buttonColor = "red"; to store the button color.

3

Write function to log custom event

Write a function called logSpecialButtonClick that calls analytics.logEvent with event name "special_button_click" and an object parameter with key button_color set to the variable buttonColor.

Firebase

import { getAnalytics } from "firebase/analytics";
const analytics = getAnalytics();
const buttonColor = "red";

# Define function logSpecialButtonClick to log the custom event

Hint

Define function logSpecialButtonClick() { analytics.logEvent("special_button_click", { button_color: buttonColor }); }

4

Call event logging on button click

Add an event listener to a button with id specialBtn that calls the function logSpecialButtonClick when the button is clicked.

Firebase

import { getAnalytics } from "firebase/analytics";
const analytics = getAnalytics();
const buttonColor = "red";

function logSpecialButtonClick() {
    analytics.logEvent("special_button_click", { button_color: buttonColor });
}

// Add event listener to button with id 'specialBtn'

Hint

Use document.getElementById("specialBtn").addEventListener("click", logSpecialButtonClick);

Practice

1. What is the main purpose of custom events in Firebase Analytics?

easy

A. To replace default events with simpler ones

B. To automatically collect user location data

C. To track specific user actions not covered by default events

D. To send notifications to users

Solution

1. Step 1: Understand default vs custom events

   Default events cover common actions, but some user actions need custom tracking.

2. Step 2: Identify the role of custom events

   Custom events let you track specific actions unique to your app that default events don't cover.

3. Final Answer:

   To track specific user actions not covered by default events -> Option C

4. Quick Check:

   Custom events = track unique user actions [OK]

Hint: Custom events track unique actions default events miss [OK]

Common Mistakes:

• Thinking custom events replace default events
• Assuming custom events send notifications
• Believing custom events collect location automatically

2. Which Firebase function is used to log a custom event with parameters?

easy

A. firebase.analytics().logEvent(eventName, params)

B. firebase.analytics().trackEvent(eventName, params)

C. firebase.analytics().sendEvent(eventName, params)

D. firebase.analytics().createEvent(eventName, params)

Solution

1. Step 1: Recall Firebase Analytics API for events

   The correct method to log events is logEvent.

2. Step 2: Confirm method signature

   logEvent takes the event name and optional parameters as arguments.

3. Final Answer:

   firebase.analytics().logEvent(eventName, params) -> Option A

4. Quick Check:

   logEvent = log custom events [OK]

Hint: Use logEvent to send custom events with parameters [OK]

Common Mistakes:

• Using trackEvent instead of logEvent
• Using sendEvent or createEvent which don't exist
• Confusing parameter order or names

3. What will happen if you run this code snippet?

firebase.analytics().logEvent('purchase', {item: 'book', price: 15});

medium

A. Throws a syntax error due to incorrect parameter format

B. Logs a custom event named 'purchase' with item and price parameters

C. Logs a default event ignoring parameters

D. Sends an error because 'purchase' is a reserved event name

Solution

1. Step 1: Analyze the logEvent call

   The code calls logEvent with event name 'purchase' and parameters object.

2. Step 2: Check if 'purchase' is valid and parameters are correct

   'purchase' is a valid event name and parameters are passed as an object correctly.

3. Final Answer:

   Logs a custom event named 'purchase' with item and price parameters -> Option B

4. Quick Check:

   logEvent('purchase', params) = logs event with params [OK]

Hint: logEvent with name and object logs event with parameters [OK]

Common Mistakes:

• Thinking 'purchase' is reserved and causes error
• Assuming parameters must be strings only
• Confusing syntax causing error

4. Identify the error in this Firebase custom event logging code:

firebase.analytics().logEvent('level_up', 'level', 5);

medium

A. Incorrect parameter format; parameters must be in an object

B. Event name must be uppercase

C. logEvent requires only one argument

D. The event name 'level_up' is invalid

Solution

1. Step 1: Review logEvent parameter requirements

   logEvent expects the second argument as an object containing key-value pairs.

2. Step 2: Identify the mistake in argument passing

   The code passes parameters as separate arguments instead of a single object.

3. Final Answer:

   Incorrect parameter format; parameters must be in an object -> Option A

4. Quick Check:

   Parameters must be an object, not separate arguments [OK]

Hint: Pass parameters as one object, not separate arguments [OK]

Common Mistakes:

• Passing parameters as multiple arguments
• Assuming event name case matters
• Thinking logEvent takes only one argument

5. You want to track when users complete a tutorial step with step number and success status. Which is the best way to log this custom event in Firebase?

hard

A. firebase.analytics().logEvent('tutorial_complete', {step: stepNumber, success: isSuccess});

B. firebase.analytics().logEvent('tutorial_complete', stepNumber, isSuccess);

C. firebase.analytics().logEvent('tutorialComplete', {stepNumber, isSuccess});

D. firebase.analytics().logEvent('tutorial_complete', {stepNumber: stepNumber, success: isSuccess});

Solution

1. Step 1: Check event name format

   Firebase recommends lowercase with underscores for event names, so 'tutorial_complete' is correct.

2. Step 2: Verify parameters object keys and values

   Parameters should be an object with clear keys. firebase.analytics().logEvent('tutorial_complete', {stepNumber: stepNumber, success: isSuccess}); uses keys 'stepNumber' and 'success' with values from variables.

3. Step 3: Compare options for best practice

   firebase.analytics().logEvent('tutorial_complete', {step: stepNumber, success: isSuccess}); uses 'step' key which is less descriptive than 'stepNumber'. firebase.analytics().logEvent('tutorialComplete', {stepNumber, isSuccess}); uses camelCase event name which is less recommended. firebase.analytics().logEvent('tutorial_complete', stepNumber, isSuccess); passes parameters incorrectly.

4. Final Answer:

   firebase.analytics().logEvent('tutorial_complete', {stepNumber: stepNumber, success: isSuccess}); -> Option D

5. Quick Check:

   Use descriptive keys and correct event name format [OK]

Hint: Use descriptive keys and underscore event names [OK]

Common Mistakes:

• Passing parameters as separate arguments
• Using camelCase event names instead of underscores
• Using unclear parameter keys