Up-To-Date Analytics on a Static Website

[paullj]

---

publishedAt: 2022-06-10T12:00Z
description: How I added simple, privacy focused analytics with up-to-date view counts to a static blog

I have a previous post talking about how this website and blog is powered by GitHub Discussions and SvelteKit; but I thought I would go into more detail on how I collect basic analytics for this website.

This website uses GoatCounter, an open source web analytics platform which does not track any personal data. It is lightweight and fast with a focus on privacy, collecting minimal information from each unique visitor. It is perfect for this application where detailed analytics are overkill.

SvelteKit includes a client-side router that intercepts navigations (from the user clicking on links, or interacting with the back/forward buttons) and updates the page contents, rather than letting the browser handle the navigation by reloading.

This means that we have to manually update page view by hooking into SvelteKit's afterNavigate life cycle function as shown in the snippet below. This function runs when ever a page mounts, or when SvelteKit navigates to a new URL but stays on the same component.

  afterNavigate(({ to }) => {
    if(window.goatcounter) {
      window.goatcounter.count({
        path: to.pathname,
      })
    }
  });

GoatCounter makes it very easy to send view count data with the correct path using a small script.

Each post is displayed with its view count on the main page, this data is also easily fetched from GoatCounter. At build time the updated unique visitor count is fetched from the GoatCounter JSON API.

If this website is built and redeployed infrequently, how does the view count get updated? By utilising Svelte actions and the use directive. A custom action takes in an asynchronous function which returns a string or number and updates the inner HTML of the target HTML element with the response of the asynchronous function. This allows for some elements to be partially hydrated after page load.

<span use:hydrateAction={async () => await getViewCount(slug)}>
    {viewCount}
</span>

You can see code for the action here, and the function which fetches the view count here.

This approach gets the best of both worlds for a static website; fast page load and up-to-date view counts. The same approach could also be used to partially hydrate any other data on a static website that updates more frequently than rebuilding the website.