Form Analytics, Drop-Off Tracking & Beacon API

Technical Deep Dive & Specifications

Core Form Telemetry Metrics

Production telemetry systems monitor five primary metrics:

+-----------------------------------------------------------------------------------+
|                            FORM TELEMETRY EVENT STREAM                            |
+-----------------------------------------------------------------------------------+
  Page Render (t = 0.0s)
         |
         v
  [ Time-to-First-Interaction (TTFI) ] -> Time elapsed until first field focus (e.g. 2.4s)
         |
         +--> [ Field Dwell Time ] ------> Time spent focused inside #email (e.g. 3.1s)
         |
         +--> [ Correction Count ] ------> Number of times user hit Backspace / re-edited
         |
         +--> [ Error Frequency ] -------> Number of invalid constraint events fired
         |
         +--> [ Abandonment Point ] -----> Last active field when page was closed
+-----------------------------------------------------------------------------------+

The Page Teardown Dilemma & navigator.sendBeacon()

When a user closes a browser tab or navigates away, the browser tears down the JavaScript execution environment.

• The Problem: A standard fetch('/api/analytics', { method: 'POST' }) started inside an unload or pagehide handler is immediately aborted by the browser before the TCP packet leaves the network socket.
• The Solution (navigator.sendBeacon): navigator.sendBeacon(url, data) queues data asynchronously in the browser's background networking stack. The browser guarantees transmission even after the document has been completely destroyed.

+-----------------------------------------------------------------------------------+
|                        PAGE TEARDOWN TELEMETRY MECHANICS                          |
+-----------------------------------------------------------------------------------+
  User closes browser tab:
    - Standard fetch() -----------> ❌ Aborted immediately (Telemetry LOST!)
    - Synchronous XHR ------------> ❌ Deprecated / Blocked by modern browsers
    - navigator.sendBeacon() -----> 🟢 Handed to browser process (Guaranteed Delivery!)
    - fetch(url, { keepalive: true }) 🟢 Modern Fetch alternative with keepalive flag
+-----------------------------------------------------------------------------------+

Modern Lifecycle: Why visibilitychange Replaces unload

On mobile devices (iOS Safari / Android Chrome), switching apps or swiping to the home screen does not reliably fire beforeunload or unload.

• The Modern Standard: Listen to document.addEventListener('visibilitychange', ...) and check document.visibilityState === 'hidden'.

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // User switched tabs, locked screen, or closed browser
    flushTelemetryBeacon();
  }
});

Telemetry Transport API Matrix

Privacy & Compliance Mandates (GDPR / CCPA)

Never transmit the actual text values entered into inputs in your analytics streams:

• ❌ Prohibited: Logging "password123", credit cards, or customer email strings.
• 🟢 Allowed: Logging field_id: "email", time_spent_ms: 3200, corrections: 2, has_error: true.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 100–120 (FormTelemetryTracker): Modular telemetry engine tracking session timings without storing any raw user input strings (GDPR-compliant).
• Lines 131–142 (focusin): Computes Time-to-First-Interaction (TTFI) on the very first field focus and sets the baseline for field dwell tracking.
• Lines 145–153 (focusout): Accumulates high-precision dwell time per field when the user tabs away.
• Lines 156–162 (keydown Backspace/Delete): Tracks typing friction by counting text corrections.
• Lines 165–171 (invalid capture event): Intercepts native constraint validation errors to measure which inputs cause the most customer confusion.
• Lines 181–186 (visibilitychange handler): Listens for page abandonment and dispatches a telemetry payload using navigator.sendBeacon() with a Blob payload.

Expected Browser Render Output

{
  "timeToFirstInteraction": "1.84s",
  "lastActiveField": "email",
  "fieldBreakdown": [
    {
      "field": "company",
      "dwellSeconds": "4.2s",
      "corrections": 1,
      "errors": 0
    },
    {
      "field": "email",
      "dwellSeconds": "6.8s",
      "corrections": 3,
      "errors": 1
    },
    {
      "field": "team_size",
      "dwellSeconds": "0.0s",
      "corrections": 0,
      "errors": 0
    }
  ]
}