Analytics with vanilla JS: motivation

How to implement a feedback loop into the product?

A useful analytics tool will provide a direct feedback loop on how to improve our product. Every product (business/web page/blog, ...) want's to track different things. For example, user behavior, web site visits... For some of that, you can use Google Analytics or another commercial tool. But what if you want to track something extra? Or you don't like that Google charges you for data exports. Or you simply don't want to share user data with a 3rd party. All of a sudden, you end up with some hybrid custom solution. But why bother with tracking in the first place?

Users are lazy. They won't take the time to tell you what's wrong with your product. They'll just leave and take their $$$ elsewhere. So how can you improve your product? By catching as much user data as possible and analyzing it without endangering the user's privacy.

I had to start somewhere, so I decided to build my own web page analytics tool. If I used every tool on the market, I would end up with a blob of JavaScript:

But I wanted something with a minimal amount of code and zero libraries. So pure JS, not 1000 libraries. Partially to reduce complexity but mostly to learn.

When I headed out to build my own analytics tool, a quick search online didn't help much. Sadly most of the knowledge on analytics tool building is in the hands of big companies like Facebook, Amazone, Netflix, Google... Then at some point, I came across a simple example by accident. Then built forward from thereon. My process?

Google => Implement => Test => Brainstorm => Google => Implement => ...

User privacy: Depending on where you provide your web page (EU, for example), you have to notify the users about tracking and allow them to disable it. Track only the data you need for the development of your product. Don't track for advertising and selling data. Be better then Facebook 😉 Encrypt the tracking data, so even if it gets stolen, it is a bit harder to decode.

Build products for the user benefit. Not to exploit and sell their privacy.

Requirements

I first though how the user interacts with our page:

Each user starts a user session when he/she requests the web page files from the server for the first time. Once the first request is processed user get's back the first web page view. Then the user clicks a link on the web page and gets back from the server another page view. On each page view, we want to track what the user does: mouse clicks, key presses, ...

With that in mind, I came up with a few requirements for the implementation:

• an alternative to third party tracking tools
• only pure/vanilla JS code (no external JS libraries)
• support for new web browsers
• track users that are not logged in
• be able to track:

- number of views per page - what web site user came from - how long did the page take to load - type of user device and screen size - browser type - user language - time zone - page view durations - events during user page visit: clicks, key presses, ... - user sessions: what pages did the user visit sequentially

With the above list in mind, I started building things.

Stay tuned

In the upcoming article, I'll focus on counting page visits and monitoring the necessary quantities. If you have any ideas, what else we could track let me know in the comment section below.