November 6, 2023
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:
- It has limited ability to do click tracking by leveraging the
:activeon most elements. I didn’t want to go with :hover because I wanted the same behavior on mobile and desktop. While
:hoverworks for mobile taps, I don’t want tracking for anytime a mouse hover occurs on desktop.
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.