Integrate Piwik Website Analytics into Textpattern

admin-ajax

Textpattern CMS has basic visitor log capability included as standard. Many people choose to integrate one or more 3rd-party analytics service into Textpattern as part of the setup process, choosing a hosted service like Google Analytics, a commercial offering like HitTail or an open source equivalent like Piwik. I’ve recently started using Piwik instead of Google Analytics, and I prefer it overall.

Today, I’m going to show you how to install Piwik to your Arvixe server and integrate it with Textpattern (or, if you prefer, integrate Textpattern with Piwik). In this walkthrough, Piwik is a self-hosted solution that runs on your Arvixe server. There is a Piwik-hosted commercial offering, that’s not the focus of this article.

Piwik is written in PHP and uses MySQL to store data. To that end, you’ll need a database with a username and password. Log in to your server cPanel and use the MySQL Database Wizard to make a new database. You can, if you wish, have Piwik and Textpattern in the same database, but I wouldn’t recommend it – both products will write and read from the database on page loads, and if you can balance this input/output between two databases you’ll have a better experience all round. Note down the database name, username and password.

Download the latest version of Piwik from here. Expand the files and upload the piwik directory to your server. In my case, I’m upload piwik alongside the textpattern directory so I can access Piwik at the same level as Textpattern. Like this:

  • http://example.com – Textpattern home page
  • http://example.com/textpattern – Textpattern administration area
  • http://example.com/piwik – Piwik administration area

Allow time for the Piwik files to upload. At the time of writing, there are 3,700+ files totally nearly 30MB to upload to your site and depending on the traffic levels on your Arvixe server it might take a while – even with a fiber-grade upload speed my upload nearly an hour. Make a tasty beverage while you wait; there’s nothing else to do until all the files are uploaded.

When all files are uploaded, start the Piwik installation by visiting the appropriate URL. If you’ve followed my route above, it should be in http://example.com/piwik – note that example.com is a placeholder and you should switch this for your website address. The Piwik installation is pretty straightforward and should take a few minutes, especially if you’re familiar with LAMP stack software. During the installation, you’ll be offered up a block of code to include in the pages you want to track. Make a note of this: copy and paste it into a text editor for now, and keep it safe until we’re done with integrating into Textpattern. When Piwik is installed, there’s one more thing to do which will get Textpattern talking to Piwik. There’s a chunk of code to copy and paste into your Textpattern page template to ensure it runs when pages are viewed from the browser.

This raises an interesting point: should you paste the code into a Textpattern page or a form? Regardless, the code will need to be processed on each page view, so there are two options:

  1. paste the code directly into the page
  2. create a form and then use <txp:output_form> in the page to parse the form each

It’s down to personal choice, frankly. I’m confident enough to have code directly in the page, but you may wish to decouple this third-party code into a form and then essentially suck it in with <txp:output_form> instead. In this example, I’m going to show you how to add the code directly to the page, I’ll go into some more detail with <txp:output_form> another time soon. The code you need to import will look something like this:

<!-- Piwik -->
 <script type="text/javascript">
 var _paq = _paq || [];
 _paq.push(['trackPageView']);
 _paq.push(['enableLinkTracking']);
 (function() {
 var u=(("https:" == document.location.protocol) ? "https" : "http") + "://example.com/piwik/";
 _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);
 })();
 </script>
 <noscript><p><img src="http://example.com/piwik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
 <!-- End Piwik Code -->

This code uses JavaScript to talk to Piwik, which in turn logs viewer activity and provides a good UI for your analytics data. Your code chunk will have been provided during the installation routine. As a guideline, it’s best to have JavaScript toward the end of a HTML document for speed reasons. With that in mind, we’ll put this code before the closing </body> tag in our Textpattern pages. The usual caveat applies: make sure you have backups of your site before you start changing things. Textpattern is very stable, but it’s a good habit to take regular backups of your stuff.

In your Textpattern administration area, go to Presentation, then Pages. From there, choose the default page. Highlight all the code, copy it, and then paste it into a text editor. Now, copy the Piwik code above and insert it into your page code just before the </body> tag. When the Piwik code is included in the page, select it all, copy it and paste it back into the Textpattern window to overwrite the old code. In my case, the last part of my page now looks like this:

<!-- footer -->
 <footer role="contentinfo">
 <p>
 <small>
 <txp:text item="published_with" />
 <a rel="external" href="http://textpattern.com" title="<txp:text item="go_txp_com" />">Textpattern CMS</a>
 </small>
 </p>
 </footer>
<!-- add your own JavaScript here -->
<!-- Piwik -->
 <script type="text/javascript">
 var _paq = _paq || [];
 _paq.push(['trackPageView']);
 _paq.push(['enableLinkTracking']);
 (function() {
 var u=(("https:" == document.location.protocol) ? "https" : "http") + "://textpattern-arxive.com/piwik/";
 _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);
 })();
 </script>
 <noscript><p><img src="http://textpattern-arxive.com/piwik/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
 <!-- End Piwik Code -->
</body>
</html>

That’s the default page taken care of. Repeat the above process with error_default and archive pages, and you’re good to go. Textpattern is now tracking page views with Piwik. You can take a closer look at Piwik by logging in with the username and password you supplied during the installation.

Looking for quality Textpattern Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , , , , , , , , , | Posted under Textpattern | RSS 2.0

Author Spotlight

Pete Cooper

Pete Cooper

Pete Cooper has been using Textpattern since 2005. Textpattern is his preferred CMS weapon of choice. Its logical and flexible approach to content management makes Pete happy, as does its lightweight core and helpful user community. Pete's website - petecooper.org - runs on top of Textpattern and chronicles his day-to-day experiences from his home near the Atlantic in north Cornwall, United Kingdom.

Leave a Reply

Your email address will not be published. Required fields are marked *


1 + 8 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>