Matomo Analytics with WagtailCMS

Introduction

Matomo is an open source alternative to Google Analytics that focuses on data ownership and privacy. Both a Cloud and an On-Premise solution exist. I opted for deploying Matomo to my own VPS. HowToForge has a great guide to help you deploy Matomo to your own server. https://www.howtoforge.com/how-to-install-matomo-piwik-on-centos-8/

WagtailCMS is an Open Source Content Management System built using Python and Django. This guide assumes that you have a website already built using Wagtail and you’re either ready to deploy or have already deployed into production.

This guide will walk through integrating Matomo into your WagtailCMS website for a more private and secure method of tracking the number of visitors and other valuable metrics.

Requirements

Access to the source code of your Wagtail site that is either in production or ready to be deployed to production.
A Matomo account either in the Cloud or on your own On-Premise server.

Configuring Wagtail

Let’s start by first configuring your Wagtail site for using the Matomo Javascript code. Matomo instructions say to add their Javascript to the <head> tag of your site and to ensure the code is in all webpages. I try to avoid inline CSS/Javascript code when possible.

Start by opening up the base.html page for your app. I like to separate my base.html files by apps instead of using one base.html for the whole project. In my case I have blog_base.html stored in

/BASE_DIR/blog/templates/blog/blog_base.html

Matomo instructions say to add the Javascript code just before the </head> tag. Instead were going to add a <script> tag pointing to an analytics.js file. You can name this file whatever you want, analytics.js was the first thing to pop into my mind.

<script type="text/javascript" src="{% static 'js/analytics.js' %}"></script>

Next we create the analytics.js file that we’ll use to import the Matomo JS code. Since I can potentially use this in other apps I created the file in the same folder that stores your settings folder.

BASE_DIR/ProjectName/static/js/analytics.js

If you’re using source control like Git, commit this file to your repository blank or with a comment indicating what the file is for.

Adding a new website to Matomo

If you’re using a freshly installed instance of Matomo you will have created a website during the first time setup process. Just follow the instructions and you’ll be provided with the Javascript code to add into your Wagtail site. Otherwise follow the instructions below.

Log into your Matomo website and navigate to the “All Websites” tab in the top navigation bar.
At the bottom of the list click on the “Add a new website” button.
Assuming you’re using this on a website, click on the “Website” button to answer the “What would you like to measure?” dialog.
Fill out the form for Managing Measurables and click Save at the bottom of the page.
In your newly created website, find the link for “View Tracking Code”.
On the Tracking Code page, scroll to the bottom of the Javascript Tracking section.
Copy the Javascript only. Everything between the <script></script> tags.

Last Step

On your production server, paste the code into the analytics.js file that was created in the Configuring Wagtial section.

That’s it!

Restart your HTTP server, in my case both Gunicorn and Nginx. Make sure that tracking is allowed in your browser for your website. You should see hits in Matomo when your site is visited.

Cheers!

Blog