Using Navigator sendBeacon for Web Analytics

The Navigator.sendBeacon method provides a reliable, asynchronous way to transmit small amounts of analytical data from a client browser to a web server without delaying page navigation. Traditionally, sending logging data when a user leaves a page was fraught with dropped requests and degraded performance. sendBeacon solves this by offloading the HTTP request to the browser's background process, ensuring critical analytics arrive safely at the server without impacting the user experience.

The Problem with Traditional Data Logging

When tracking user behavior, developers frequently need to log metrics at the end of a session, such as total time spent on a page, final scroll depth, or exit events. Historically, developers relied on XMLHttpRequest (XHR) or the fetch() API inside event listeners like beforeunload or unload.

This approach presented two significant issues:

  1. Synchronous Requests Hurt UX: Using synchronous XHR forced the browser to wait for the network request to finish before rendering the next page, causing noticeable latency for the user.
  2. Asynchronous Requests Fail: Using standard asynchronous XHR or fetch() often resulted in the browser terminating the request prematurely as the document was unloaded from memory, leading to lost analytics.

How Navigator.sendBeacon Works

The navigator.sendBeacon() method addresses these shortcomings by queuing an asynchronous POST request that the browser manages independently of the document's lifecycle. Once the method is invoked, the data is handed off to the browser itself, allowing the request to complete even if the originating page is completely closed or navigated away from.

The syntax is straightforward:

navigator.sendBeacon(url, data);
  • url: The endpoint destination where the analytical data should be sent.
  • data: An optional payload containing the data, which can be an ArrayBuffer, Blob, DOMString, FormData, or URLSearchParams.

The method returns a boolean: true if the browser successfully queues the request for delivery, and false if the browser cannot accept the request (typically due to quota limits).

Key Advantages for Analytics

  • Guaranteed Delivery on Exit: By utilizing the visibilitychange or pagehide events alongside sendBeacon, developers can capture exit intent data with near-100% transmission reliability.
  • Zero Impact on Unload Performance: Because the transmission is scheduled in the background, it never delays the transition to the next URL, preserving browser responsiveness.
  • Fire-and-Forget Architecture: Analytics pipelines do not typically require a server response on the client side. sendBeacon embraces this by eliminating the need to process response headers or status codes, keeping client-side code lean.

Limitations to Consider

While sendBeacon is the standard tool for unloading telemetry, it has specific constraints:

  • Payload Size Limits: Most browsers impose a cumulative limit (commonly 64 KB per page) on data queued by sendBeacon to prevent resource abuse.
  • No Custom Request Methods: All requests are sent exclusively via the HTTP POST method.
  • No Response Handling: The client application cannot read the response from the server, making it unsuitable for transactions that require client-side confirmation or dynamic state updates.