Stas Antropov

Thoughts on life, learning and software engineering

Setting Up GoatCounter

Posted at — Aug 10, 2020

I did not want to use Google Analytics for this blog. GA is an excellent tool, and but I had my reasons:

After searching around and going through several threads on Hacker News I have narrowed down the choice to two very different alternatives: GoatCounter and Ackee. I thought Ackee’s UI looked better, but they offered no hosted version and I did not want to self-host just yet. GoatCounter looked simpler and had more of bare bones FOSS feel to it. Still, I liked the spirit and goals of the project. Additionally, it is written in Go which I am curious about. So I settled on the GoatCounter.

Martin Tournoij, the creator of the GoatCounter, has a Why page explaining the rationale behind the GoatCounter and a separate document comparing GC with other solutions. Both were very helpful in making the decision.

Setting up GC with Hugo was very simple:

1. Registered GoatCounter account

This took only a few minutes and I got the JavaScript snippet to add to the web site (reformatted for ease of reading):

<script 
    data-goatcounter="https://san.goatcounter.com/count" 
    async src="//gc.zgo.at/count.js">
</script>

In the snippet above, “san” is the site code I got from GC.

2. Added config parameter

Then I’ve added configuration parameter for the GC site code to the params section of the Hugo’s config.toml:

[params]
  subtitle = "Thoughts on life, learning and software engineering"

  # GoatCounter analytics code
  goatCounter = "san"

Since the Ezhil Hugo theme already supported GA, I have decided to use it as a reference. I have searched the site/theme files for the existing GA code and found it in the footer.html partial.

To override the footer, I have copied footer.html from the template into /layouts/partials/ and added the following to inject the GC tracking code if GC site code is configured:

{{- if isset .Site.Params "goatcounter" -}}
<script data-goatcounter="https://{{ .Site.Params.GoatCounter }}.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
{{- end -}}

The full /layouts/partials/footer.html

If you are wondering about the google_analytics_async.html above - this is an internal Hugo template for GA that Ezhil theme relies on.

Note the {{ if not .Site.IsServer }} conditional. It checks if the site is running on Hugo’s internal server (eg during dev/debug) and does not add tracking code then. Logical.

That’s it. You can see the public GoatCounter dashboard for this blog here.

GoatCounter screenshot