Stephanie Gredell

Simple analytics with CSS

I’m always fascinated about what is achievable without Javascript. So when I was reading this article about how Bear Blog does analytics with CSS, I decided to do my own experimentation. The concept here is to use css to trigger certain endpoints by using properties that require loading an image (or something).

To do this, I spun up an ExpressJS app and created a simple endpoint that started out with just outputting certain params. I kept it simple in the beginning as I just needed a feedback mechanism for the requests my CSS was making. If I were to use this somewhere, I would need some sort of data store to persist data. But otherwise, it would be quite simple.

The next step was to make the request look legitimate. I made myself a 1 pixel transparent dot to send back so that whatever image property I chose, the browser got this pixel back. Yes, this felt a bit old school to me but I gave myself some grace knowing I wasn’t hiding an image tag to load this dot.

I first tested on my local dev environment and then I used my phone to see how it worked in a mobile environment.

Here are some of my learnings:

The thing I enjoyed the most about this was that it was really going back to basics. In a world where rendering a whole page using Javascript is a common thing, it’s nice to be able to just do some basic simple things and achieve a lot more with greater simplicity. Will this solution work for everyone? Probably not. But will it work for a basic website that just needs to see basic trends? Likely.

You can play around with the code I hacked around with by checking out this repo. It went a bit further than what I described here but you can get the general idea if you wanted to build out your own analytics app in Node.