minuteware

minute discoveries

Integrate Piwik into Jekyll

| Comments

First we have to take the Piwik JavaScript Tracking Code from Piwik Administration website and replace Piwik URL and site ID with Jekyll variables, like so (note the {{ site.piwik.base_url }} and {{ site.piwik.site_id }}):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(["trackPageView"]);
  _paq.push(["enableLinkTracking"]);

  (function() {
    var u=(("https:" == document.location.protocol) ? "https" : "http") + "://{{ site.piwik.base_url }}/";
    _paq.push(["setTrackerUrl", u+"piwik.php"]);
    _paq.push(["setSiteId", "{{ site.piwik.site_id }}"]);
    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);
  })();
</script>
<!-- End Piwik Code -->

Save this code snippet as _includes/piwik

Now we need base_url and site_id variables defined in _config.yml. Add the following to _config.yml:

1
2
3
piwik:
  base_url: piwik.mydomain.net
  site_id: 1

For the default Jekyll template add the following after </head> tag in _layouts/default.html:

1
{% raw %}{% include piwik %}{% endraw %}

That’s it. After our website is rebuilt all the pages will include the above Piwik JS tracking code with variables replaced with their values from _config.yml

Comments