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 |
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
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:
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.
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.