Many studies have shown that performance matters a lot. For each 100ms a websites takes longer to load, a business may lose about 0.1% to 1% in revenue. It also matters because Google judges page speed as a ranking factor for search results page. At InnoCraft, we help our clients optimizing their Piwik integration and recommend different ways of embedding the tracking code tailored to their needs. The best way to embed the tracking code depends on your website, what you want to achieve, and how important tracking is to you.

This technical blog post mainly focuses on improving the time to load your website. This is an important metric as for example Google usually measures the time it took to load a page. Many businesses therefore want to get to the page load event as quickly as possible.

The regular way of embedding the tracking code

By default, Piwik is embedded in the header or footer of your website. This is a sensible default. While it is loaded asynchronously and deferred, it still does delay the onload event. Depending on the performance of your Piwik, how fast your website loads, how your website’s resources are embedded, and other factors you may want to consider alternatives. Three of them I will introduce below.

Embedding the tracker after the load event

If your server is slow and delays your load event, you may want to load the tracking code only after the website is loaded like this:

var _paq = _paq || [];
_paq.push(["trackPageView"]);
_paq.push(["enableLinkTracking"]);

function embedTrackingCode() {
   var u="https://your.piwik.domain/";
   _paq.push(["setTrackerUrl", u+"piwik.php"]);
   _paq.push(["setSiteId", "1"]);

   var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript";
   g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s);    
}

if (window.addEventListener) { 
    window.addEventListener("load", embedTrackingCode, false); 
} else if (window.attachEvent) { 
    window.attachEvent("onload",embedTrackingCode); 
} else {
    embedTrackingCode();
}

The downside is you won’t track all of your visitors because some will have already left your website by the time your website is fully loaded. Especially when you have a JavaScript-heavy website or when your website takes longer to load in general. To detect the load event correctly cross browser, you may want to use a library like jQuery.

Delaying the tracking

Another technique is to load the tracking with a little delay at the end of your website like this:

setTimeout(function () {
    embedTrackingCode();
}, 5);

This time the tracking script will still track most of your visitors but does not slow down loading the rest of your website as much as it would do by default (at least perceived). In some cases, you will notice a performance improvement when looking at the “time to load” but it depends on your website.

Not loading the JavaScript Tracker at all

With Piwik you also have the option to not embed the tracking code into your websites at all and instead generate reports from the webserver logs using Piwik Log Analytics. This works very well but some data might not be available like the device resolution which can be only captured using JavaScript. On the bright side this solution also captures users with ad blockers or tracking blockers.

Questions?

We invite you to test different ways to see what makes sense for you and how it affects your website performance as well as the perceived performance. If you have any questions, feel free to get in touch with us.

Read on

The last post in this series is Performance optimizations you can apply today to load the Piwik JavaScript tracker faster.


InnoCraft

We are the makers of Piwik Analytics, the leading open source analytics platform used on more than 1 million websites and apps. We provide outstanding products and services to help you grow and achieve your business goals using the power of Piwik Analytics. We also love privacy and giving our customers full control over their digital analytics data.


Any questions?

Many answers and more information about Piwik You can find here:

We are social

Follow us: