Testing sendBeacon settings for sending data

Using standard methods of sending data to Google Analytics, it is likely that the system will not have time to send all events if the process was interrupted by reloading the page. Earlier this year, several publications appeared on how to improve the integrity of the data collected in GA. One of them was devoted to events that track user actions leading to page reloads: clicks on external links, file downloads, clicks on form submit buttons, beforeunload events. To solve the problem, the author of the material, Dmitry Osiyuk, suggests setting the transport field with the value beacon in the Google Analytics code . This field determines which of the sending 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 itself chooses the best shipping method. Navigator.sendBeacon is used only if beacon is selected as the transmission mechanism (transport field). According to Google, in the future the beacon option is likely to be used in the browsers supporting it by default. I decided to check in practice what effect the use of the sendBeacon setting gives.

What was done:

Selected 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, working on the same triggers. One used the standard send method, the second one sendBeacon.

In addition, I decided to test the use of different tag priorities in GTM in order to understand the influence of the settings in all cases.

In other words, when the user clicked on the link we needed, GTM sent the event to GA twice: once using the standard method, once using the sendBeacon method. Priorities can be changed in the advanced tag settings in GTM, the item is “Priority for tag activation”. Zero is the minimum priority; the higher the number, the higher the priority compared to other tags. By default, the value is zero.

Verify sendBeacon

I tested three options:

• Priority is given to standard dispatch;
• Priority is higher for sendBeacon;
• Equally high priority for both methods.

In the case of differing 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 of the methods worked earlier in half the cases.

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

Priority for standard sending

Priority at sendBeacon

Same priority - largest sample

As the test showed , sendBeacon really performs better, but the percentage of events that might not have been sent is not so high. The difference compared to the conventional sending method is ~ 0.3%. It is also worth considering 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 site, which occurs when using other methods. The speed of downloading and loading pages does not drop.

* Bonus: During the experiment, I was additionally convinced that the priorities for activating tags in GTM work fine.