Different ways of embedding the Matomo tracking code for faster website performance

InnoCraft
April 18, 2017

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 Matomo, we help our clients and users optimizing their Matomo 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, Matomo (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 Matomo, 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

To ensure that your website will always load even if the Matomo server is un-available, you may want to load the tracking code only after the website is loaded like this:

var _paq = window._paq = window._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 Matomo 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 Matomo 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.