umami - A Google Analytics Alternative For Hugo
This post is part of the Blogging with Hugo series.
I’m going to keep this post as short as my other one on custom comments in Hugo using Isso. Most of the information is borrowed from Uberspace.
By default, Hugo comes with an option to enable Google Analytics. But, as you might already know, I like to go with self-hosted alternatives for services (most of the time, there is one). This time, it’s umami, a privacy friendly website analytics tool.
Installation
As this blog is hosted on ateroids 🚀, I will be referring to their lab’s installation guide mentioned above.
Follow the installation guide. As always, adapt the following steps to your specific setup and environment!
- Clone the source code to a folder of your choice and install the dependencies with
npm - Create database tables (MySQL and PostgreSQL are supported)
- Prepare an
.envfile with your database configuration and build the application - Setup running umami as a service or deamon
- Setup a reverse proxy to access umami, i.e. at a subdomain like
https://analytics.my-hugo-blog.tld
Configuration
Once umami is running, login and change your password! Add your website to get a tracking code snippet to collect data, that we can use in a custom partial.
Analytics partial
Hugo has an built in internal template for Google Analytics that is activated, once you configure your Google Analytics ID. We are going to create our own partial template to include the tracking code snippet and make it configurable.
Create a partial for your website at layouts/partials/comments. For this theme, I gave users the option to choose from either Google Analytics or umami, based on their configuration.
{{ if and .Site.GoogleAnalytics (not .Site.IsServer) }}
{{ template "_internal/google_analytics.html" . }}
{{/* Add support for umami website analytics */}}
{{ else if and .Site.Params.umami.enabled (not .Site.IsServer) }}
<script
async
defer
data-website-id="{{ .Site.Params.umami.websiteId }}"
src="{{ .Site.Params.umami.jsLocation }}"
></script>
{{ end }}
This will check if the config paramter GoogleAnalytics is set. If it is, it will render the internal, standard partial for Google Analytics.
If GoogleAnalytics is not set, and instead Params.umami.enabled is true, it will render the umami code snippet. Your blog’s config might look something like this:
[Params.umami]
enabled = true
websiteId = "unique-website-id"
jsLocation = "https://analytics.my-hugo-blog.tld/umami.js"
That’s it. You’re done. Once again, you optioned against a data leech such as Google. Your website analytics are under your control now.
Sources:
