How to implement a basic page view counter for a GitHub-Pages-powered site? [closed]

Question

I want to host a Jekyll blog using GitHub Pages. I have purchased a license to display a web font for up to 50.000 page views/month. I order to not violate this agreement, I need to implement some kind of mechanism to count page views, so that I can take action whenever I reached 50,000 page views.

I have some rather complicated ideas in my head. On the one hand, I was thinking about performing a call to some AWS Lambda function that counts each page view, and takes action if it is one too many. On the other hand, I learned that MyFonts, Linotype and other font shops offer some of their web fonts using a licensing model called "pay-as-you-go", in which case they do mandate their customers to use a page view counter they provide, so that they can charge continuously, whenever certain quotas are hit. Their customers add those page view counters to their web sites by linking to a unique CSS file hosted by the respective font shop.

However, since I am probably not the only one having to deal with this, I wonder how other people solve this. My ideas seem to be a little over the top for what really is just a page view counter.

Is there an easier way? How is it commonly done?

Pontic

Answer 1

There is a free API you can use with JavaScript to do this. I wear it and it works like a glove.

Basically you create a key (namespace) and each post for this route it increments 1. Then you can restore this count for display.

https://javascript.plainenglish.io/how-to-count-page-views-with-the-count-api-afc9369c1f8f

https://countapi.xyz/

Overcloud

Answer 2

You have different options:

1. Use their counter
Using their (the type-foundries) CSS file, on which THEY count hits, is the easiest solution. Not a very nice one, as it requires an external request, but the easiest for sure. Note that over-active ad-blockers could block these cross-domain requests, resulting in a broken page with a default font.

2. An external counter
If you want your font to always load, you should host everything locally (CSS and font) and use an external counter (like Google Analytics). However, this counter can (and will) be blocked too. Your font will load, but your counter will not be very accurate.

3. AWS Lambda or a log analyzer
When you want a more accurate counter, you can use a local Lambda function or you can put the output of your Jekyll website on a shared webhosting account with AWstats (a log analyzer). This is by far the best solution. Your font will always load and your counter is quite accurate.

4. Use a different license
A less logical solution is to not use these kind of licenses. Get yourself a nice looking open-source font from Google and host it yourself. You can use https://google-webfonts-helper.herokuapp.com/fonts to download the fonts. This is by far my favorite solution.

Barmen

Thank you for your response. Clearly, I am hosting my fonts by myself. My question is how to conveniently count page views. And this has to be possible — even with GitHub Pages —, otherwise font shops couldn't offer their "pay-as-you-go" services. Also, if not possible, no one couldn't use commerical fonts on GitHub Pages — which I doubt. – Pontic

Answer 3

Another thought might be to use CloudFlare Worker to front the site and use Worker KV to track page views. Or, if you want to go further, that could also be your endpoint to count.

But assuming those vendors only count uncached requests, you could put your worker counter on the path of the font file to track how often the server is hit for those files. Then if you match the same cache-control policy as the vendor, you should have the same measuring system set up.

Rori

One note is that Cloudflare Workers on the free tier limits 1000 writes/day. developers.cloudflare.com/workers/platform/limits/#kv-limits – Untruthful

Answer 4

Many GitHub hit counters require servers or databases. But there is a GitHub Action that uses GitHub API. It updates daily and does not require any servers or databases. It automatically saves changes into the repository. Go to the template GitHub Insights Template

Hostility

I don't think this works for non-repo GitHub houses pages the question is asking about. – Stamper