How do you track page views in a Single Page Application?

What's really being asked

This question tests your understanding of how Single Page Applications manage navigation state without full page reloads. The interviewer wants to see if you know the underlying browser mechanism—the History API—that frameworks like React Router and Vue Router abstract away. They are assessing your ability to hook into the SPA lifecycle at the right points to capture meaningful user actions, differentiating between user-initiated navigation within the app and browser-level actions like using the back/forward buttons.

The full answer

A strong answer addresses two distinct navigation scenarios. First, for programmatic navigation (e.g., clicking a <Link> component), you should hook into your framework's router. In React, this is typically a useEffect hook that depends on the location object from react-router-dom. When location.pathname changes, you fire your tracking event. Second, for browser-driven navigation (back/forward buttons), you must listen for the popstate event on the window object. This is crucial because the History API methods pushState and replaceState, which routers use internally, do not trigger a popstate event themselves. A complete solution requires both.

The mistakes people make

A major red flag is providing an incomplete solution, like only mentioning the useEffect hook and forgetting about the popstate event for browser history navigation. This signals a framework-level understanding without knowledge of the underlying browser APIs. Another common mistake is incorrectly stating that pushState or replaceState fires an event. Candidates also fail by giving a vague answer like "I'd use an analytics library" without explaining how that library would detect the navigation change, which is the core of the question.

What usually comes next

Expect questions about implementation details. "How would you avoid sending duplicate events if both your effect hook and popstate listener fire close together?" (Debouncing or state management). "What other information would you send with a page view event?" (User ID, session ID, referrer URL, time since last event). "How does this change if the app uses hash-based routing (/#/about)?" (You'd listen for the hashchange event instead of popstate).

A concrete example

In a React app using React Router, you'd create a component that runs on every page. It would contain two useEffect hooks. The first hook would be: useEffect(() => { trackPageView(location.pathname); }, [location.pathname]);. This handles internal navigation. The second hook would be: useEffect(() => { const handlePopState = () => trackPageView(window.location.pathname); window.addEventListener('popstate', handlePopState); return () => window.removeEventListener('popstate', handlePopState); }, []);. This handles back/forward clicks.