How to Track Screen Views in Firebase Analytics for Web Apps

1// Automatic tracking (limited for SPAs):
2// Firebase logs page_view on initial load with:
3// - page_location: full URL
4// - page_referrer: previous URL
5// - page_title: document.title
6
7// Manual tracking (recommended for SPAs):
8// You log screen_view with custom parameters:
9// - firebase_screen: human-readable screen name
10// - firebase_screen_class: component or route name
11
12// Disable automatic page_view if you want full manual control:
13import { initializeAnalytics } from "firebase/analytics";
14
15const analytics = initializeAnalytics(app, {
16  config: {
17    send_page_view: false, // Disable automatic page_view
18  },
19});

1import { getAnalytics, logEvent } from "firebase/analytics";
2
3const analytics = getAnalytics();
4
5export function trackScreenView(
6  screenName: string,
7  screenClass: string = "Page"
8) {
9  logEvent(analytics, "screen_view", {
10    firebase_screen: screenName,
11    firebase_screen_class: screenClass,
12  });
13
14  // Optionally update the document title for consistency
15  document.title = `${screenName} | Your App Name`;
16}
17
18// Usage examples:
19// trackScreenView("Home", "LandingPage");
20// trackScreenView("User Profile", "ProfilePage");
21// trackScreenView("Settings", "SettingsPage");

1import { useEffect } from "react";
2import { useLocation } from "react-router-dom";
3import { trackScreenView } from "./analytics";
4
5// Map routes to screen names
6const SCREEN_NAMES: Record<string, string> = {
7  "/": "Home",
8  "/dashboard": "Dashboard",
9  "/profile": "User Profile",
10  "/settings": "Settings",
11  "/pricing": "Pricing",
12};
13
14function getScreenName(pathname: string): string {
15  // Exact match
16  if (SCREEN_NAMES[pathname]) return SCREEN_NAMES[pathname];
17
18  // Dynamic routes: /posts/123 -> "Post Detail"
19  if (pathname.startsWith("/posts/")) return "Post Detail";
20  if (pathname.startsWith("/users/")) return "User Profile";
21
22  return "Unknown Page";
23}
24
25export function AnalyticsTracker() {
26  const location = useLocation();
27
28  useEffect(() => {
29    const screenName = getScreenName(location.pathname);
30    trackScreenView(screenName, "WebApp");
31  }, [location.pathname]);
32
33  return null; // This component renders nothing
34}
35
36// In your App.tsx:
37// <BrowserRouter>
38//   <AnalyticsTracker />
39//   <Routes>...</Routes>
40// </BrowserRouter>

1// router/index.ts
2import { createRouter, createWebHistory } from "vue-router";
3import { trackScreenView } from "@/analytics";
4
5const router = createRouter({
6  history: createWebHistory(),
7  routes: [
8    {
9      path: "/",
10      name: "Home",
11      component: () => import("@/views/Home.vue"),
12      meta: { screenName: "Home" },
13    },
14    {
15      path: "/dashboard",
16      name: "Dashboard",
17      component: () => import("@/views/Dashboard.vue"),
18      meta: { screenName: "Dashboard" },
19    },
20    {
21      path: "/settings",
22      name: "Settings",
23      component: () => import("@/views/Settings.vue"),
24      meta: { screenName: "Settings" },
25    },
26  ],
27});
28
29// Track screen views on every navigation
30router.afterEach((to) => {
31  const screenName = (to.meta.screenName as string) || to.name?.toString() || "Unknown";
32  trackScreenView(screenName, "VueApp");
33});
34
35export default router;

1// Enable debug mode in the browser console:
2// Open Chrome DevTools > Console and run:
3// firebase.analytics().setAnalyticsCollectionEnabled(true);
4
5// Or add the debug parameter to your URL:
6// https://your-app.com/?debug_event=true
7
8// Or install the GA Debugger Chrome extension
9// and enable verbose mode
10
11// For programmatic debug mode in development:
12import { getAnalytics, setAnalyticsCollectionEnabled } from "firebase/analytics";
13
14const analytics = getAnalytics();
15
16if (process.env.NODE_ENV === "development") {
17  // Events still appear in DebugView even in dev mode
18  // as long as analytics is initialized
19  console.log("Firebase Analytics debug mode active");
20}
21
22// Verify in Firebase Console:
23// 1. Go to Analytics > DebugView
24// 2. Select your debug device from the device list
25// 3. Navigate through your app
26// 4. screen_view events should appear in the timeline
27// 5. Click each event to see firebase_screen parameter

1// Firebase Console reports for screen views:
2//
3// 1. Events report: Analytics > Events > screen_view
4//    Shows total screen_view count over time
5//
6// 2. Pages and screens: Analytics > Engagement > Pages and screens
7//    Groups by firebase_screen parameter
8//    Shows: screen views, users, avg engagement time
9//
10// 3. Custom audience example:
11//    Create an audience of users who viewed "Pricing" screen
12//    Analytics > Audiences > New audience
13//    Condition: screen_view where firebase_screen = "Pricing"
14//
15// 4. BigQuery export for advanced analysis:
16//    Firebase Console > Project Settings > Integrations > BigQuery
17//    Enable daily export, then query events_* tables:
18//
19// SELECT
20//   event_params.value.string_value AS screen_name,
21//   COUNT(*) AS views
22// FROM `project.analytics_123.events_*`,
23//   UNNEST(event_params) AS event_params
24// WHERE event_name = 'screen_view'
25//   AND event_params.key = 'firebase_screen'
26// GROUP BY screen_name
27// ORDER BY views DESC