Enabling Analytics

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.

Enable analytics

You can enable analytics via the init function.

logowl.init({
ticket: '2ATNP1AD70',
sendAnalytics: true
});

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.

logowl.init({
ticket: '2ATNP1AD70'
});
logowl.enableAnalytics();

Consent banner

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 bannerText, bannerRejectLabel and bannerAcceptLabel are optional. If not provided, the adapter will use defaults.

logowl.init({
ticket: '2ATNP1AD70',
showBanner: true,
bannerText: 'We would like to collect anonymized data to improve your experience.',
bannerRejectLabel: 'Cancel',
bannerAcceptLabel: 'Accept'
});

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 disableAnalytics function.

logowl.init({
ticket: '2ATNP1AD70'
});
logowl.disableAnalytics();

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.

logowl.init({
ticket: '2ATNP1AD70',
sendAnalytics: true,
SPAMode: true
});

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 and leavingPage. The 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:

import React, { useEffect } from 'react';
const WithAnalytics = (Component) => (
function HOC(props) {
useEffect(() => {
window.logowl.enteringPage();
return () => {
window.logowl.leavingPage();
};
}, []);
return <Component {...props} />
}
);
export default WithAnalytics;

Now you can wrap all the components that you would like to track with the WithAnalytics HOC.

export default WithAnalytics(MyComponent);

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 unload event 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 unload event 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)
Edit this page