When integrating an analytics platform, we often find situations where tagging events have to be pushed right before redirecting the user to a new page e.g. clicking on a product in the SERP.

This involves certain risks and challenges, such as ensuring data has been sent to the server before unloading the document while keeping navigation fast and responsive. For better or for worse, data is precious and we want to make sure these technical challenges do not stop us from gathering all that valuable information in time.

Fortunately, modern browsers have us covered!

On today’s post, we are going to introduce the Beacon API.

What is the Beacon API?

The Beacon API provides a way to schedule asynchronous and non-blocking requests to a web server.

Beacons are sent from the global browsing context, which means these requests are guaranteed to be initiated before the page is unloaded and they are run to completion, without delaying the navigation – even when the user has already been redirected to the next page. That sounds like heaven for analytics, right?

The API is very simple and consists of just one function in the navigator object:

1

navigator.sendBeacon(url, data?)

Under the hood, the sendBeacon function sends a POST request to the specified URL, without expecting a response from the server. The data parameter can optionally be used for data transmission. This function also returns a boolean value, true if the user agent is able to successfully queue the request and false otherwise.

For instance, leveraging on Empathy’s Search & Tagging capabilities, tracking a click on a result would look this simple:

1

navigator.sendBeacon(result.ebTagging.click)

An important note is that, even though data is sent from the global browsing context, the request will still contain all relevant cookies available at the time sendBeacon is called.

Why use the Beacon API?

Using the Beacon API over regular XHR or fetch requests for analytics has many advantages:

  • Data is sent reliably and asynchronously. No more dirty hacks!
  • The performance of the navigation is not affected (no need to delay the unload until data has been submitted).
  • The API is easy to use and does not require additional code to ensure data delivery.
  • It has a wide browser support, with polyfills available for IE and early versions of Edge.
  • Beacon requests do not compete for network and compute resources with other high priority operations such as fetching critical resources, reacting to input or running animations.
  • Did I say no more dirty hacks already?

Additional resources

The introduction of the W3C Beacon Specification is a fantastic read to further understand the rationale behind the Beacon API, the problematic with all the harmful alternatives that developers use to ensure the delivery of data and why the Beacon API is a stronger match for this purpose.

Now you have no excuse, integrate Empathy’s tagging and get access to valuable search insights and contextualization!