Rage Taps, Dead Taps, and the 12-Pixel Rule: Cookieless Mobile UX Measurement on Cloudflare D1

The challenge of measuring website user experience on mobile devices without relying on cookies or other tracking methods became apparent when a user opened a page, scrolled to a phone number and did not call. Traditional metrics such as pageviews and bounce rate are insufficient in this scenario. To address this issue, the author developed a custom measurement system using Cloudflare Pages Function, a D1 table, and an inline script, ensuring no reliance on cookies, localStorage, or consent banners.

The first hurdle was determining what constitutes a tap. A naive implementation, which listens for pointerup, fails on real phones as every scroll gesture ends with a pointerup. Swipes and long-presses on images also result in false positives. To refine the definition of a tap, two thresholds were established: a movement of 12 pixels and a duration of 600 milliseconds from pointerdown.

If the conditions are not met, the event is recorded as a real tap. The capture and passive flags are also crucial in this setup, as they ensure the tap is recorded before other handlers can interfere and prevents it from being swallowed by other components.

Another important aspect of the measurement system is storing tap coordinates in percentages rather than device pixels. This allows for accurate comparison across various devices with different screen sizes. By calculating the percentage of the viewport width and document height, including the scroll offset, the author ensures that a tap at "62% down the page" remains meaningful regardless of the device used. Using raw pixels would have made the data device-specific and difficult to aggregate.

The measurement system also captures "dead taps," instances where a user believed an element was clickable but it wasn't. This signal proves invaluable as it can reveal conversion bugs that are otherwise hard to detect. For instance, if a user taps around a phone number that isn't actually a tel: link, this would be recorded as a dead tap.

Additionally, "rage taps" are identified through a sliding window of three taps within 900 milliseconds and 40 pixels proximity. This indicates that the user is experiencing issues such as unresponsiveness or a clickable element that appears interactive but isn't.

Lastly, the system accounts for pinch-zoom events, which provide insight into whether text is too small to read. By checking if the zoom scale is greater than 1.15 and a zoom hasn't already been recorded, the system logs the zoom level. This information helps identify areas where text size may need adjustment to improve user experience.