Measure active engagement time accurately

WHAT THIS TESTS: It checks whether you understand why naive time-on-page is wrong and which browser APIs fix both the measurement and the delivery problems at scale.

A GOOD ANSWER COVERS: Define active engagement time as time the user is plausibly attending. Maintain an accumulating timer that increments only when two conditions hold: the page is visible, detected via the Page Visibility API and visibilitychange events, and the user is active, inferred from recent interaction events such as scroll, mousemove, keydown, and touch within a short idle timeout of a few seconds; if no interaction occurs, pause the timer. This excludes backgrounded tabs and idle reading-abandoned sessions. For delivery, do not POST continuously. Accumulate locally and flush at sensible moments, but the unload moment is unreliable for a normal XHR, so use navigator.sendBeacon, which queues a small payload the browser sends asynchronously even as the page unloads, fired on visibilitychange to hidden or on pagehide.

COMMON WRONG ANSWERS: Counting wall-clock time from load to unload as engagement, which inflates idle tabs left open for hours. Polling the server every second, which hammers it under load. Using a synchronous XHR on unload, which browsers may drop or block. Ignoring the visibility state entirely so backgrounded tabs still accrue time.

LIKELY FOLLOW-UPS: Why is sendBeacon better than a synchronous XHR on unload. What idle timeout is reasonable for reading. How do you handle the back-forward cache and the pagehide event correctly. How do you aggregate noisy client-reported times robustly on the server side.

ONE CONCRETE EXAMPLE: A reader opens an article, reads for forty seconds, switches tabs for five minutes, then returns and skims for ten seconds. The engagement timer records about fifty active seconds, not six minutes, because it paused entirely while the tab was hidden. On pagehide a single sendBeacon ships the fifty-second total in one compact, non-blocking request without delaying the user's navigation away from the page.