Google Analytics, track page unload event

Question

I'm trying to accomplish tracking an event when a user leaves the page with Google Analytics (analytics.js). Though it is unknown how the user will leave, it may be because of an external link or just closing the tab. So my thought was to hook onto the beforeunload or unload event and then:

window.addEventListener("beforeunload", function() {
    ga('send', 'event', 'some', 'other', 'data');
});

Now my question is, will the request to the GA server be synchronous or can I somehow force that behaviour with the hitCallback property? If that is not possible, how else can I achieve this? Preferably without having to set a timeout or fixed waiting time for the user!

Answer 1

Set transport to beacon, with ga:

window.addEventListener("beforeunload", function() {
    ga('send', 'event', 'page_unload', 'bye bye', {transport: 'beacon'});
});

Or transport_type to beacon, with gtag:

window.addEventListener("beforeunload", function() {
  gtag('event', 'page_unload', {
    'event_category': 'my cat',
    'event_label': 'my label',
    'transport_type': 'beacon'  // <--- important part here
  });
});

For what is worth, beacon should become the default transport mode anyway. As of 2020-09:

Currently, gtag.js only uses navigator.sendBeacon if the transport mechanism is set to 'beacon'. However, in the future, gtag.js will likely switch to using 'beacon' as the default mechanism in browsers that support it.

Answer 2

There is a way to make sure the request will be sent to GA. Simo Ahava wrote a very good blog post titled -
"Leverage useBeacon And beforeunload In Google Analytics".

Utilizing the brilliant sendBeacon solution. Here's quote which addresses the selected answer of this question:

User agents will typically ignore asynchronous XMLHttpRequests made in an unload handler. To solve this problem, analytics and diagnostics code will typically make a synchronous XMLHttpRequest in an unload or beforeunload handler to submit the data. The synchronous XMLHttpRequest forces the User Agent to delay unloading the document, and makes the next navigation appear to be slower. There is nothing the next page can do to avoid this perception of poor page load performance.

There are other techniques used to ensure that data is submitted. One such technique is to delay the unload in order to submit data by creating an Image element and setting its src attribute within the unload handler. As most user agents will delay the unload to complete the pending image load, data can be submitted during the unload. Another technique is to create a no-op loop for several seconds within the unload handler to delay the unload and submit data to a server.

Not only do these techniques represent poor coding patterns, some of them are unreliable and also result in the perception of poor page load performance for the next navigation.