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

Need a 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"

Need a 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

Need a 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'

Need a hint?

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