Google Analytics Track Unload Event

Question

I am trying to track an event when a user leaves the page using Google Analytics (analytics.js). Although it is not known how the user will leave, this may be due to an external link or just closing a tab. So I thought I needed to catch 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 this behavior to use the hitCallback property? If this is not possible, how else can I achieve this? Preferably without having to set a timeout or a fixed timeout for the user!

Answer 1

The request will not be synchronous, GA tracking requests will never be.

The only way to ensure that the call ends is to make sure the page remains open long enough for the event on the link, which you usually do with a timeout, potentially in combination with hitCallback, as you mentioned.

The only way to open the window when the user closes the tab is to return a value from your beforeunload handler, which will trigger a Confirm Navigation warning. Obviously, this would be a very bad decision to just keep track of the GA event.

Answer 2

There is a way to ensure that the request is sent to GA. Simo Ahab wrote a very good blog post titled Using Leverage and Uploading to Google Analytics .

Using the brilliant sendBeacon solution. Here's a quote that looks at the selected answer to this question:

User agents usually ignore the asynchronous XMLHttpRequests made to the unload handler. To solve this problem, the analytics and diagnostics code usually makes a synchronous XMLHttpRequest in unloading or beforeunload handler for sending data. The synchronous XMLHttpRequest causes the user agent to delay the unloading of the document, and makes the next navigation slower. The following page can do nothing to avoid this perception of poor page load performance.

There are other methods used to provide data transfer. One such method is to delay unloading so that creating an image element and setting its src attribute within the unload handler. Since most user agents delay uploading to complete the expected image download, data can be sent during uploading. Another way is to create a no-op cycle within a few seconds within the upload handler to delay the upload and send data to the server.

Not only these methods are bad coding patterns, some of them are unreliable and also lead to the perception of a bad load page for the next navigation.

Answer 3

You can wait for the hit to be sent to Google Analytics on the onunload page, but this requires a busy cycle. In my case, this did not delay the user's navigation, since the page was a popup designed for webapp. I would be more interested in doing this with normal web page navigation. However, I had to take 2 showers to get the dirt out after you made the code with a busy cycle.

 var MAX_WAIT_MS = 1000; var _waitForFinalHit = false; function recordFinalHit() { _waitForFinalHit = true; ga('send', 'event', 'some', 'other', 'data', { 'hitCallback': function() { _waitForFinalHit = false; } }); } function waitForFinalHit() { var waitStart = new Date().getTime(); while (_waitForFinalHit && (new Date().getTime() - waitStart < MAX_WAIT_MS)) { } } function myOnUnload() { recordFinalHit(); // Do your other final stuff here... waitForFinalHit(); } window.onunload = myOnUnload;