How would you track clicks on headlines and calls-to-action?

WHAT THIS TESTS: This question probes whether you can apply basic DOM event patterns to a real product task. The interviewer wants to see that you understand event delegation, the event object, and how to design a minimal, privacy-conscious telemetry payload without resorting to anti-patterns that MDN and modern frameworks discourage.

A GOOD ANSWER COVERS: First, event delegation: place a single click listener on a common ancestor such as the main container or document body, rather than registering separate listeners on every headline and CTA. Second, the addEventListener API and the event object: inside the handler you read event.target or use element.closest to find the clicked component, then extract a stable identifier from a data attribute like data-track-id instead of fragile inner text. Third, payload design: capture timestamp, the element identifier, current page URL, a session or anonymous user token, and the event type; avoid collecting personally identifiable information. Fourth, transport: mention navigator.sendBeacon for reliable unload-time delivery, or a standard fetch to an analytics endpoint, and note that batching reduces network overhead.

COMMON WRONG ANSWERS: Suggesting inline onclick attributes is a major red flag because MDN explicitly recommends against them in favor of addEventListener. Attaching unique listeners to dozens of elements shows poor performance intuition. Using element text or CSS class names as primary identifiers is brittle because copy and styling change frequently. Forgetting to mention the event object or failing to handle clicks on child elements nested inside a button are also gaps that signal shallow experience.

LIKELY FOLLOW-UPS: An interviewer might ask how you would track dynamically injected content, which is where event delegation shines since new nodes do not need their own listeners. They might ask how you distinguish two buttons with identical labels, pushing you toward data attributes. They could also ask about Single Page Application navigation, privacy implications under GDPR, or how to prevent click spam by debouncing rapid repeated interactions.

ONE CONCRETE EXAMPLE: Imagine a landing page with a hero headline and three signup buttons. You add one click listener to the article wrapper with addEventListener. When a user clicks any nested CTA, the handler calls event.target.closest with a selector for data-analytics-id, reads the value hero-cta-primary, and constructs a JSON payload containing ISO timestamp, id, page path, and a session UUID from a cookie. The data is sent via navigator.sendBeacon to an internal analytics API so the click is recorded even if the user immediately navigates away.

Source: developer.mozilla.org