Testing the sendBeacon setting to send data

When using standard methods of sending data to Google Analytics, there is a possibility that the system will not have time to send all the events if the process was interrupted by reloading the page. Earlier this year, several publications appeared on how to improve the integrity of the collected data in GA. One of them was devoted to events that track user actions leading to page reloading: clicks on external links, file downloads, clicks on form submit buttons, and beforeunload events. To solve the problem, the author of the material, Dmitry Osiyuk, proposes to set in the Google Analytics code a field of transport with the value beacon. This field specifies which of the dispatch methods to use:

xhr (using the XMLHttpRequest object)
image (using the Image object)
beacon (using the navigator.sendBeacon method).

sendBeacon will work asynchronously, even if the user closes the page or leaves the site altogether, which should allow collecting data more accurately.

Now analytics.js chooses the optimal dispatch method. Navigator.sendBeacon is used only if the beacon is selected as the transfer mechanism (the transport field). According to Google, in the future, the beacon option is likely to be used in the default browsers that support it. I decided to test in practice what effect the use of the sendBeacon setting gives.

What was done:

Chose an event for the test: click on the link in the menu. By clicking, another page is loaded.
Created two tags in Google Tag Manager, triggered by the same trigger. One used the standard submission method, the second - sendBeacon.

Additionally, I decided to test the use of different tag priorities in GTM in order to understand the effect of customization in all variants.

In other words, when the user clicked on the link we need, GTM sent the event to GA twice: once by the standard method, once by the sendBeacon method. You can change priorities in the advanced settings of the tag in GTM, the item “Priority of the activation of the tag”. Zero - the minimum priority; the higher the number, the higher the priority compared to other tags. The default value is zero.

Verify that sendBeacon is working

Tested three options:

• Priority is higher for standard shipments;
• The priority is higher for sendBeacon;
• Equally high priority for both methods.

In the case of different priorities, when the user clicked on the link, GTM first sent the event with the highest priority, immediately after it - the second. When priorities coincided, each method worked earlier in half of the cases.

As a result, you can observe two pairs of events - for PC (desktop) and mobile devices (tablet and mobile).

Priority for standard shipping

SendBeacon priority

Same priority - highest sample

As the test showed , sendBeacon does work better, but the percentage of events that might not have gone is not that high. The difference compared with the usual method of sending ~ 0.3%. It should also be borne in mind that sendBeacon is designed to track events that lead the user to a new page. When using this method to track all events on the site, the difference will be even less significant. At the same time, sendBeacon has an advantage: sending data asynchronously, it does not slow down the work of the site, which occurs when using other methods. The speed of unloading and loading pages does not fall.

* Bonus: During the experiment, I additionally made sure that the tag activation priorities in GTM work fine.