↓Skip to main content
Weaxs in Nokstella
  1. Articels/

Hugo + umami Blog Statistics Panel

·1222 words·6 mins
Blog Setup Hugo Umami
Weaxs
Author
Weaxs
Table of Contents

Introduction
#

Umami is a tool for web access statistics and an alternative to Google Analytics. This article mainly introduces using umami to add a visitor statistics panel to a blog

umami-software/umami

Umami is a simple, fast, privacy-focused alternative to Google Analytics.

TypeScript
23128
4301

We will introduce the following options:

| Platform | Deployment management method | Advantages
| Netlify + Neon | Self-operated deployment. Neon deploys PostgreSQL and Netlify deploys umami. | Free, data can be retained permanently, unlimited statistics | Deployment is troublesome, requires 2 platforms, mainly because Netlify cannot deploy DBs | https://www.netlify.com/ https://neon.tech/ | Railway | Self-operated deployment. Deploy umami and PostgreSQL on Railway. | Relatively easy to deploy, self-operated data is retained permanently, unlimited statistics | Not free, at least $5/month | https://railway.app/ | | Vercel + TiDB Cloud | Self-operated deployment: Enable TiDB Serverless directly on TiDB Cloud and associate it with Vercel to deploy umami. | Free, simple and fast, unlimited monitoring of websites, can bind your own domain name | TiDB Cloud stores 5G of data for free | https://vercel.com/
https://tidbcloud.com/ |

✨ For specific billing methods, specifications, and other questions, please check the platform’s Pricing

Umami Cloud
#

Configuration
#

Go to https://cloud.umami.is/ to register, add the domain to be tracked

Tracking Code
#

Go to https://cloud.umami.is/settings/websites, click edit for the website you want to view, and you can find the Tracking code we need to add to the website

TrackingCode.png

Netlify + Neon
#

Deployment
#

  1. Go to the Neon platform to create a PostgreSQL database and record the DATABASE_URL after successful creation, for example: postgres://user:[email protected]/neondb
  2. Go to the Netlify platform to deploy the umami service
    1. Fork the umami GitHub source code
    2. In the Netlify platform, build the forked code base
    3. Add the environment variable DATABASE_URL and set the value to the database address obtained from the Neon platform
    4. Deploy the service
    5. Replace it with your own domain name address, or you can use the one provided by the platform

Tracking Code
#

After successful deployment, log in to the umami console using the domain name provided by the platform. The default username is admin and the password is umami.

In “Settings” - “Website” - “Edit”, you can find the Tracking Code we need

TrackingCode2.png

Reference
#

https://umami.is/docs/running-on-neon

https://umami.is/docs/running-on-netlify

Railway
#

Deployment
#

  1. Create Project
  2. Add PostgreSQL to Project
  3. Add and deploy umami service in Project
    1. Select forked umami code base
    2. Add the environment variable DATABASE = ${{Postgres.DATABASE_URL}}
    3. Deploy the service
    4. You can set a custom domain name or use the one provided by the platform

Railway.png

Tracking Code
#

The self-operated umami service can be viewed in the same place as the Tracking Code, as shown in the figure below:

TrackingCode2.png

Reference
#

https://umami.is/docs/running-on-railway

Vercel + TiDB Cloud (recommended)
#

Deployment
#

  1. Register with Vercel and TiDB Cloud
  2. Create a TiDB Serverless instance in TiDB Cloud and create a corresponding database
  3. Create a project for umami in Vercel. The operation here is no different from that of Railway, so it will not be repeated here.
  4. Integrate TiDB Cloud with the corresponding project in Vercel. For this part, refer to the TiDB documentation Integrate TiDB Cloud with Vercel

Vercel.png
Link Vercel and TiDB Cloud.png

Reference
#

https://umami.is/docs/running-on-vercel

Integrate TiDB Cloud with Vercel

Configure under the Hugo framework
#

Through familiarity with umami, we know that to add umami tracking to a website, we need to add <script async defer src="http://mywebsite.com/umami.js" data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"></script> to the <head> tag.

So, how do you add it to the in the Hugo framework?

Next, we need to understand Partial in Hugo. It is used for context components in page templates, such as unifying the configuration of the header and footer of the pages on the website. The specific configuration directory is layouts/partials/*.html

Back to the question, we need to add the umami script in <head>, which actually means we need to add it in layouts/partials/head.html. There are two ways to do this:

  1. Write it directly in head.html
  2. Write it in another directory of the partial and import it in head.html by **{{** partial "<PATH>/<PARTIAL>.html" . **}}**

Ladder theme
#

The source code for the Ladder theme is

guangzhengli/hugo-theme-ladder

A fast, clean Hugo theme | 一个简单而优雅的 hugo 主题

HTML
174
29

From the source code in layouts/partials/common/analytics.html, you can see that this theme imports umami

{{ template "_internal/google_analytics.html" . }}

{{ if .Site.Params.analytics.umami.enable }}
<script async defer data-website-id="{{ .Site.Params.analytics.umami.website_id }}" src="{{ .Site.Params.analytics.umami.url }}"></script>
{{ end }}

At the same time, we can see in the source code layouts/partials/head.html, umami’s js is imported into the head as follows:

{{ partial "common/analytics.html" . }}

In summary, if we are building a blog based on Ladder, then we can simply add it directly to the configuration file. Specifically, add the following configuration to config.yml in the root directory of the project:

params:
	analytics:
	  umami:
	    enable: true
        website_id: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
        url: https://analytics.umami.is/script.js

Blowfish theme
#

The code base of the Blowfish theme is

nunocoracao/blowfish

Personal Website & Blog Theme for Hugo

HTML
1550
427

Blowfish supports analytics in the directory layouts/partials/analytics. Here we can see that Blowfish currently only supports the following two analytics:

  1. Google Analytics
  2. Fathom Analytics

In layouts/partials/head.html we can see that Blowfish imports main.html from the analytics directory into head.html

  {{/* Analytics */}}
  {{ partial "analytics/main.html" .Site }}
  {{/* Extend head - eg. for custom analytics scripts, etc. */}}
  {{ if templates.Exists "partials/extend-head.html" }}
  {{ partialCached "extend-head.html" .Site }}
  {{ end }}

Below we provide two ways to add umami analytics

  1. Without modifying the source code version
    1. Add the layouts/partials/extend-head.html file to import the umami script
    2. Add the parameter to config/_default/params.toml
  2. Modify the source code version
    1. Add layouts/partials/analytics/umami.html. The specific code is the same as the extend-head.html in Method 1
    2. Modify layouts/partials/analytics/main.html and import umami.html via {{ partial "analytics/umami.html" .Site }}
    3. Add a parameter to config/_default/params.toml

The following is an example version, and the html file is imported as follows:

{{ if isset site.Params.umamiAnalytics "domain" }}
<script async src="https://{{ site.Params.umamiAnalytics.domain }}/script.js" data-website-id="{{ site.Params.umamiAnalytics.websiteid }}"></script>
{{ else }}
<script async src="https://analytics.umami.is/script.js" data-website-id="{{ site.Params.umamiAnalytics.websiteid }}"></script>
{{ end }}

Add the parameters in config/_default/params.toml

[umamiAnalytics]
  websiteid = "xxxxx"
  domain = "umami.example.com"

Configure TrackEvent
#

Here is some sample code. The html file is as follows:

const type = document.head.querySelector('meta[property = "og:type"]').getAttribute('content');
let title = document.head.querySelector('meta[property = "og:title"]').getAttribute('content');
let url = document.head.querySelector('meta[property = "og:url"]').getAttribute('content');
umami.track(type + ':' +title, {'url': url});

umami Tracker parameters
#

The script we gave above only uses the src and data-website-id parameters. You can also add some other parameters. The specific documentation is in tracker-configuration. Here is a summary

Parameter Purpose
data-host-url By default, trace information is sent to the host where the js is deployed, i.e. the host in src. This configuration can be used to modify the host to which the information is sent.
data-auto-track By default, this is set to true, which automatically traces all page visits and events. This can be set to false, and used in conjunction with tracker functions to set events and access behavior.
data-do-not-track By default, this is set to false. If set to true, it means that the visitor’s “Do Not Track” setting is respected.
data-cache By default, this is set to false. If a user has a lot of visits, setting this to true can improve the user’s access performance by caching.
data-domains If you only want to trace on specific domains, you can add this parameter to limit it.

Related

A brief introduction to blog building
·754 words·4 mins
Blog building Hugo
This article details the process of setting up a blog using Hugo and a Docker image, including the selection of different image versions, the use of the Blowfish theme, custom icons, the integration of comment plugins, the deployment of GitHub Pages, and the integration of the Umami statistics panel.