Follow Your Website Analytics With Umami

This article is part of a series showing you how to quickly and freely build and host your own Jekyll blog on GitHub Pages. This series will also cover more advanced topics like adding a comment system directly in our code using Staticman and adding privacy-friendly but still free analytics using Umami.

I divided the tutorial into several parts:

• Introduction
• Setting Up
• Create Content
• Customize Display
• Commenting System Part 1
• Commenting System - Part 2
• Analytics <- you are here

Now that our blog is fully functional, our main job is to write interesting articles.

But you are writing a blog and sharing it with the world, you probably want people to read it. To do so you will have to bring traffic to your website, and will therefore need to be able to follow your it, know which article attracts the most people, on so on.

Picking a Traffic Analytics solution

When it comes to gathering traffic data from your website, you mainly have two choices of products.

The first one is to use a free solution. Let’s be honest, we are talking about Google Analytics here, which is already pre-integrated with Jekyll. It is indeed very easy to set up but raises some confidentiality issues as its trackers are very invasive, and all the data collected eventually goes to google.

If you are concerned about collecting your user data through a company that will use them, you can go for a more privacy-focused solution, like Gauges or Simple Analytics. These companies will also allow you to collect your visitors’ data, but without exploiting them. Most of the time, they are less privacy-invading and only collect relevant information. They also usually don’t use cookies, allowing you to avoid having to put an annoying cookie banner for European visitors to comply with GDPR policies.

The counterpart for using a solution not exploiting your visitor’s data? Well, companies need to make profits to live, so you need to pay for it. This is totally ok and understandable, but you might not want to spend money just to know how many visitors come to your blog, which is already a generous donation of your time to the community.

Fortunately, development is an amazing world and some analytics companies have open-sourced their code. Here, we will see how we can deploy one of them, Umami, and how to use it for our website.

Deploying Umami on Heroku

As we already did for our comment system, we will deploy Umami on Heroku. You can see how to do so here, but we will do it together anyway.

First, you need to fork the Umamy repository on GitHub.

Then, go to your Heroku account, create a new app, and under the Deploy section choose connect to Github as Deployment method, search for the repository you just forked, and connect to it.

We then need to add a database. Go to the Ressources tab, search for Heroku Postgres in the Add-ons section and install it.

Now we need to create the required tables. Click on your new add-on (open in a new tab), then go to Settings -> View Credentials. You will get everything you need to connect to your database. Personally, I have installed the Heroku CLI so I just run the corresponding line in my terminal.

I then copied the lines from the schema.postgresql.sql file to init the tables. You can check everything went ok by running the \dt command.

\dt

List of relations
 Schema |   Name   | Type  |     Owner      
--------+----------+-------+----------------
 public | account  | table | ivcqpajmowwzfs
 public | event    | table | ivcqpajmowwzfs
 public | pageview | table | ivcqpajmowwzfs
 public | session  | table | ivcqpajmowwzfs
 public | website  | table | ivcqpajmowwzfs
(5 rows)

Then go back to the app page and, in the Settings -> Config Vars, add an HASH_SALT environment variable with any random string as a key.

Phew, we finally ended the configuration of our app!

You can now go to the Deploy section and click Deploy Branch in the Manual deploy part.

Once the build is over, you will be able to open the app and log into it with the username admin and the password umami.

The first thing you want to do is to change this password in Settings -> Profile -> Change password.

We now have to add our website to the application. To do so, go to Settings -> Website -> Add website

Click then on get tracking code to get the script line to add to your website head.

<!-- _includes/head.html -->
...
{%- if jekyll.environment == 'production' -%}
        <script async defer 
            data-website-id="<your-id>" 
            src="<your-src>">
        </script>
{%- endif -%}

Redeploy your website with it and visit it, then go to your Umami dashboard, you should see your first visit!

Yeah, my first visitor, myself!

Wrap up

Congrats, you have reached the end of this tutorial!

I hope it was beneficial to you and that you enjoyed it. You can find the code of this sample project here.

We covered quite a lot, from setting up and deploying your blog to its customization and the add of features like a commenting system or analytics.

A lot can still be done, and I encourage you to explore new possibilities from here.

If there is a subject you are particularly interested in, please share it in the comment section.

But in any case, don’t forget that the most important on the website is the content ;).