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

What's really being asked

Your understanding of how Single Page Applications handle navigation without full page reloads. The interviewer wants to see if you know the underlying browser APIs (the History API) that frameworks like React Router use, and how to hook into those changes to fire analytics events. It separates candidates who just use a framework from those who understand how it works.

The full answer

Four key points in order. First, acknowledge that SPAs don't trigger new page loads on internal navigation, so standard analytics snippets fail. Second, identify the browser's History API as the solution; specifically, pushState() and replaceState() which are used by SPA routers to change the URL. Third, explain the two detection methods: listening for the popstate event for browser back/forward actions, and hooking into the router's history object for programmatic navigation. Fourth, describe centralizing this logic, for example in a React useEffect hook that listens to location changes, to send a pageview event with the new path to your analytics service.

The mistakes people make

The biggest red flag is suggesting polling window.location with setInterval. This is grossly inefficient and indicates a lack of fundamental knowledge. Another mistake is only describing tracking on initial load, missing the "single page" part of the question. A less severe but still weak answer would be to only mention a specific library's feature (e.g., "React Router has a hook for this") without explaining the underlying browser mechanism (pushState, popstate) that makes the hook possible.

What usually comes next

Expect questions about implementation details. For example, "How would you avoid tracking Personally Identifiable Information (PII) that might appear in URL parameters?" (Answer: Sanitize URLs before sending them). Or, "How would you abstract this logic to be reusable across the app?" (Answer: Create a custom React hook like usePageTracking() or a higher-order component).

A concrete example

In a React application using React Router, you can create a dedicated component for tracking. This component uses the useLocation hook to get the current location object. You then use a useEffect hook with the location's pathname in its dependency array. Inside this effect, you call your analytics provider's page view function, like analytics.page(location.pathname). This ensures that every time the route changes, a new page view event is fired.