Twitter Email
subspace (/ˈsʌbspɛɪs/)
A Jekyll playground site

A simple goatcounter template fragment

Author: Admin
Title: Adding Goatcounter to a Jekyll site
Language: en-US
Number of words: 925
Category: Jekyll
Created: 17:59 on Monday, 19. February 2024
Modified: 17:59 on Monday, 19. February 2024
Keywords: jekyll, liquid, code, goatcounter
Excerpt:

This is a simple method to add a goatcounter analytics link to the footer of a jekyll site. It is simple and straightforward to use.
Tags: Jekyll
Page layout: nonav
Last modified: , 925 Words
17:59 on Monday, 19. February 2024 | by Admin in Jekyll

Table of Contents 

Description

Goatcounter is a simple FOSS web analytics package written in Go. It offers both (free) hosted and self-hosted options and is a very lightweight system that can run even on cheap hosting solutions (e.g. Amazon AWS Lightsail minimum configuration). The software comes in a single self-contained statically linked executable and will run on almost every Linux distribution out there. It has zero dependencies, but can utilize a PostgreSQL database when performance of the integrated SQLite module may be insufficient. For smaller sites, the SQLite backend is more than adequate and will be enough.

This article assumes that you have already setup Goatcounter on your own server or have already registered an account at Goatcounter.

Basically, there are two ways to integrate the counter. The first embeds a small javascript file which will use navigator.sendBeacon to register a pageview with the Goatcounter server. While this is technically the sophisticated method, it has privacy issues and many browsers and/or ad blockers will flag the ping request of sendBeacon as possible privacy incursion. This means, you may miss quite a lot of page hits. The second method involves a more traditional approach using a tracking pixel.

Integrating Goatcounter into a Jekyll site is basically just a matter of placing a short HTML code fragment into the footer of your page(s). Personally, I use a frontmatter variable track to determine whether the tracking code should be inserted or not. You’re free to choose how to handle this — another method could be an opt-out option to exclude certain pages from tracking. Frontmatter variables can be used for many things, after all. In any way, the tracking code can be anywhere you want, even in the header, it doesn’t really matter, but common practice is to place such code fragments near the end of the page.

Method one, using the JavaScript

Code: (click to select all)
1
2
3

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

This is the simplest form to embed the counter script. You have to replace MYID with your goatcounter account ID under which you have registered your account.

Javascript, self-hosted

If you decide to host Goatcounter on your own server, you need to make sure to have a hostname for it in your DNS. Goatcounter can be running standalone or on a custom port behind a proxy like nginx. The configuration is up to you and Goatcounter does not limit you in any way. The HTML fragment for the self-hosted option is very similar to the one above:

Code: (click to select all)
1
2
3

<script data-goatcounter="https://my.goatcounter.domain/count" 
  async src="//my.goatcounter.domain/count.js">
</script>

Tracking pixel method

This method embeds a 1x1 sized pixel from the Goatcounter server. While this is a very basic approach to count page impressions and, by default, cannot even log the referrer, it is possible to improve it a bit with some custom JavaScript code. The advantage is that browsers or ad-blockers may not block it, particularly when you’re using Goatcounter as self-hosted option and embed the tracking pixel from your own domain, avoiding a cross-domain request.

My personal method involves using JavaScript to build the image element, passing important parameters to the tracking pixel request. This allows me to record the referrer when possible and the page title. I’m not interested in other data, I basically only want to know how often my pages are visited.

The tracking pixel variant works even without JavaScript using the <noscript> tag, but be aware that this might result in more hits caused by crawlers and other bots. Goatcounter tries to filter them out, but the tracking pixel method does not always allow this.

Code: (click to select all)
1
2
3
4
5
6
7
8
9
10

<script>
  var img = document.createElement("img");
  var rnd = Math.random() * (10000000 - 1000) + 1000;
  img.src = "https://XXXX.example.com/count?p={{ page.url | uri_escape }}&t={{ page.title | uri_escape }}&r=" + document.referrer + "&rnd=" + rnd.toString();
  img.style = "display:none;";
  document.body.appendChild(img);
</script>
<noscript>
  <img src="https://XXXX.example.com/count?p={{ page.url | uri_escape }}&t={{ page.title | uri_esacpe}}" style="display:none;">
</noscript>

Of course, you have to adjust the XXXX.example.com with your own Goatcounter domain. That should be straightforward and simple. The script will pass the page url, page title, referrer and a random number as optional parameter with the purpose to defeat unwanted caching. The random tag is generated during the page view in the client browser, so it will be different for every page hit.

Privacy concerns

Privacy is always an important thing to consider when using web analytics and this is no difference. However, Goatcounter collects far less data than most of the big tracking software packages, like Google Analytics or OWA. Basically, Goatcounter only registers the page hit, records the referrer (if there is one available), tries to figure out the region of the visitor, its screen resolution, operating system and Browser software. Even the IP addresses of the visitors are not recorded and not visible to the person viewing the stats, so it’s relatively safe to say that it does not collect personal data. The tracking pixel method is unable to record the screen resolution, so it transmits even fewer data. In no way does Goatcounter track users by recording clicks and mouse movements like other web analytics software regularly does. From a privacy view point, it’s not perfect, but much better than most alternatives and it’s completely free. Since you can self-host it, you do not have to give away the collected data and you stay fully in control over how to handle it.