How to Setup Piwik's Custom Variables in Ghost


If you do not yet have Piwik installed, follow our How to Add Piwik Tracking To Ghost. Once you have it installed, you will have the Piwik tracking code setup in your Ghost's theme file and you have data reporting to your Piwik instalation. Piwik, by default, tracks a lot of data for you, but it also provides some flexibility of addition data points to track with the use of Custom Variables. With the use of Piwik's Custom Variables we have the ability to track any addition data we want. One area of our Ghost themes site that we wanted to track was the Ghost tags. By having Piwik track Ghost tags, you can quickly see what areas of your site are the most popular and what direction you should head with writing new content.

The Piwik documentation on Custom Variables tells us that we can track up to 5 custom variables per pageview. If you have Piwik already setup, adding the tracking of Ghost tags just requires you to add a few lines to your Piwik tracking code snippet.

Internally, Ghost already has support for looping over all the tags a given post has, which is exactly what we need. We will be using the {{#if tags}} and {{#foreach tags}} to first determine if the post has any tags, and secondly to start a loop to iterate over each tag. The entire snippet looks like this:

{{#post}}
{{#if tags}}
    var tagCounter=1;
    {{#foreach tags}}
        _paq.push(['setCustomVariable',  tagCounter, 'Tag', '{{name}}', 'page']);
        tagCounter++;
    {{/foreach}}
{{/if}}
{{/post}}

First, we start a counter; Piwik needs an index to track each of the custom variables individually. Then we start our if and foreach to see if we have any tags, and if we do, to start our loop. The next line is where the magic happens:

_paq.push(['setCustomVariable', tagCounter, 'Tag', '{{name}}', 'page']);

This line defines that we are going to create a custom variable, with an index of tagCounter, with a name of Tag, with the contents of {{name}} (which is the Ghost handlebar for our tag), and that we only want to track the custom variable for this page (rather than the duration of the viewers visit).

Putting the custom variable and Ghost tag tracking together will make your Piwik tracking code look like this:

<!-- Piwik -->
    <script type="text/javascript">
        var _paq = _paq || [];
            {{#post}}
            {{#if tags}}
                var tagCounter=1;
                {{#foreach tags}}
                    _paq.push(['setCustomVariable',  tagCounter, 'Tag', '{{name}}', 'page']);
                    tagCounter++;
                {{/foreach}}
            {{/if}}
            {{/post}}
        _paq.push(["trackPageView"]);
        _paq.push(["enableLinkTracking"]);
        (function() {
            var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.howtoinstallghost.com/";
            _paq.push(["setTrackerUrl", u+"piwik.php"]);
            _paq.push(["setSiteId", "5"]);
            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 -->

Once you have that in place, restart Ghost, and then head to your Piwik installation -> Visitors -> Custom Variables to see the stats on the variables you created!