How to setup Piwik with Asynchronous tracking in WordPress

2013-03-24 #Analytics #Piwik #WordPress

What is Piwik?

Piwik is an open source web analytics system written in PHP using a MySQL database for storage. It is a open source competitor to Google Analytics and it’s doing a damn good job of it. It regularly has updates and listens to what features the community wants, it is built around the needs of the people using it. Plus, it’s free!

How does it work?

Piwik tracks visits using javascript which is placed in the header of the pages that need to be tracked. Example below:

<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//stats.example.com/";
    _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.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<!-- End Piwik Code -->

The above example would be place in between the tags as it is asynchronous javascript, this helps load pages a lot faster. The only disadvantage to using this code is the fact that if someone disables javascript they won’t be tracked. If you use the old tracking script and javascript is disabled it loads a <noscript> tag and sends a 1×1 blank gif which tracks a visit, sadly since it doesn’t have the actual script part it tracks as one visit and doesn’t collect other data such as browser type and other data.

How do we insert it?

The above code is inserted in between the <head> tags, the top of your page basically. This makes it load as the page loads, instead of at the end as the old tracking code did. Check out the example below for a standard HTML page.

<!DOCTYPE html>
  <head>
    <!-- Piwik -->
    <script type="text/javascript">
      var _paq = _paq || [];
      _paq.push(['trackPageView']);
      _paq.push(['enableLinkTracking']);
      (function() {
        var u="//stats.example.com/";
        _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.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
    })();
    </script>
    <!-- End Piwik Code -->
  </head>
<html>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

That example would be for a standard HTML/PHP page/any page really. Now, how do we insert it into WordPress? Majority of WordPress themes use a file called header.php which contains all of the information just before (as a general rule) This is where we’ll insert the tracking code.

Simply place your code in this file and you can now track your website using your Piwik installation!

Why not use the WP-Piwik plugin?

I prefer to manually place the code because it gives me the flexibility to put scripts, to manually put more data into Piwik such as custom variables , and such into the code on the fly using WordPress’ API. Also I believe, point me out if I’m wrong, it doesn’t use asynchronous code. I’ll cover what modifications I’ve made to the Piwik tracking code in a later post.