Log Owl's browser adapter does not only catch errors but also collect analytic data. By default, analytics are disabled. This article will explain how analytics can be configured to help you get started.
You can enable analytics via the
Enable analytics manually
To manually enable analytics after initializing the adapter, call the
enableAnalytics function. This is useful if you want to create a banner to get the visitor's consent before collecting their data.
The adapter comes with a default banner. The visitor's data will only be collected if the user gives their consent by clicking the "Accept" button on the banner. The keys
bannerAcceptLabel are optional. If not provided, the adapter will use defaults.
Disable analytics manually
If a visitor gave their consent but want to revoke their decision and no longer be tracked, you can disable analytics for them by calling the
Single Page Applications
client-side routing is typical for frameworks like React and Angular. When using client-side routing, there is essentially only one actual page that is loaded. Navigating between routes is done in the browser and does not require an actual page load. Therefore, the adapter is not able to detect the visited pages and the time the visitor spent on each page. The browser adapter, however, offers a way to collect analytic data reliably in SPA's. As first step, you need to enable the SPA mode like shown below.
The idea is to manually tell the adapter when the page was loaded and when it was left. To do so, the adapter exposes the functions
enteringPage function should be called when the component has mounted and the
leavingPage when the component is being unmounted. Depending on the framework you are using, you can create your own reusable logic. In React, you could create a higher order component (HOC) like so:
Now you can wrap all the components that you would like to track with the
This will send an analytic event to Log Owl every time
MyComponent gets unmounted.
Known issues and limitations
- Time on page cannot be tracked on mobile devices: Log Owl sets a timestamp when the adapter is initialized. It uses the
unloadevent to detect when the visitor leaves the page. The corresponding event listener calculates the elapsed time since the adapter was initialized to get the time the visitor has spent on the page and reports it along with other analytic data. Mobile devices, however, behave differently. In fact, certain mobile browsers have deprecated the
unloadevent and alternatives couldn't provide satisfying results. That's why the adapter reports immediately on mobile devices and sets the time on page to 0. Mobile browsers are then excluded when calculating the average time on page in seconds. The average time on page is calculated like so:
total time on page in seconds / (total page visits - page visits with mobile devices)