umami - A Google Analytics Alternative For Hugo

Time 2 minute read
Free and privacy focused analytics for Hugo. Source
Free and privacy focused analytics for Hugo. [Source](https://umami.is/)
Free and privacy focused analytics for Hugo. Source

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.

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!

  1. Clone the source code to a folder of your choice and install the dependencies with npm
  2. Create database tables (MySQL and PostgreSQL are supported)
  3. Prepare an .env file with your database configuration and build the application
  4. Setup running umami as a service or deamon
  5. Setup a reverse proxy to access umami, i.e. at a subdomain like https://analytics.my-hugo-blog.tld

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.

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:


This series

  1. Chringel Hugo Theme
  2. Inline SVG Icons For Hugo
  3. Isso - An Alternative Commenting System For Hugo
  4. umami - A Google Analytics Alternative For Hugo
  5. Automatically Deploy a Hugo Website to a Remote Host Using Github Actions
  6. Hugo Simple Post Archive
  7. Random Cover Image

Calendar Posted:
Person Posted By:
Folder Open Categories: Coding Tutorials