Click events lost when the click triggers navigation

For engineers
1

Is there a recommended solution for capturing click event analytics when the click triggers a page navigation? These seem to be hit or miss for us depending on the browser and computer. Most of the time the navigation causes the previous page’s JS to stop running before the analytic event is sent to the collector.

We discussed and want to avoid any delay in the navigation to wait for Snowplow to process queued events.

We’re discussing using a service worker to send the events. As long as the service worker is actively processing a message, it will remain alive even after the supported page is unloaded.

Thoughts?

Sam

2

Hi @samueln
I’d suggest switching to use Beacon to send events, this was introduced in 2.10.x releases of the Snowplow JavaScript Tracker. This is assuming the browser supports the Beacon API which is widely supported except for IE where the Tracker will fallback to using standard POST requests.

The Beacon API will immediately send the request to the browser which will send the request asynchronously when it gets an opportunity, regardless of if the user has navigated away or even closed the tab. The Snowplow JavaScript Tracker doesn’t queue the requests that are successfully sent to the browser via the Beacon API so there is no delay in page navigation.

You can use Beacon by changing the eventMethod when initialising the tracker:

window.snowplow("newTracker", "sp", "<url>", {
    appId: "test",
    eventMethod: "beacon",
    contexts: {
        webPage: true,
        performanceTiming: true
    }
});`

If you don’t wish to use the Beacon API, then the tracker will add the events to a queue in Local Storage - if the event isn’t sent before the user navigates away then the tracker will attempt to send the events again the next time the tracker is loaded. This works well if navigation is between pages that both have the same Tracker set up but doesn’t solve the issue if navigating away or loading a tracker with a different ID.

You can read more about how the Snowplow JavaScript Tracker uses Beacon here: https://github.com/snowplow/snowplow/wiki/1-General-parameters-for-the-Javascript-tracker#22161-beacon-api-support
And you can read about the Beacon API here: https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API

2 Likes
3

This is absolutely perfect!

I wasn’t aware of the Beacon API. Really glad to see it’s built into Snowplow already. Thanks!

Sam

4

@samueln,

One thing to remember - be sure to run JS code before switching page - otherwise you will be unable to record event, even with Beacon API

Regards,
GE