Building a javascript web analytics tool from scratch

Question

I am fairly new to javascript, I do know basics. I am looking to build my own (from scratch) java script library just like google analytics.js that will track user behavior on websites. Basically I'm looking to collect data like

1. Click through data
2. Dwell time
3. Page hits etc..

I spent lot of time trying to find website/tutorials to get me started on this but I keep ending up on google analytics.js or some private tools.

What I am looking for :

1. Is there any good starting point/resource/website which can help me build this js library
2. Are there reference for archetecture of end to end system including back-end?
3. Any open-source library that I can directly use?

Some things I already looked into Chaoming build your own analytics tool Splunk BYO analytics

Answer 1

At it's most basic, the architecture of such an application would only require a client, server, and database.

You can use basic javascript functions to record specific user actions on the frontend and then push them to your server. To identify your users you can set a cookie with a unique id. Then, everytime you send data to your server, you will get the specific user request as well so you can keep track of their actions. (Be careful of privacy laws first though).

For page hits, simply send a response to the server everytime someone opens your site - so call this function as soon as your Javascript loads. On the server, send a request to increment the appropriate value in your database.

For user dwell time, write a function that records the date when the user first hits your site and then count how long they stay there. Push your data to the server every so often and save updates to the user record by adding the new time spent to the current time spent. You could also watch for when a user is about to exit out of the site and then send the data all at once that way - although this method is more fragile.

For clicks and hovers, set up onclick and mouseover event handlers on your links or whatever elements you want to track. Then push the url of the link they clicked or whatever data you want - like "Clicked navbar after 200 seconds on site and after hovering over logo`.

If you want suggestions on specific technologies, then I suggest Node.js for your server side code and MongoDB for your database. There are many tutorials out there on how to use these technologies together. Look up javascript events for a list of the different things you can watch for on the frontend.

These are the building blocks you need. Now you just have to work on defining the data you want and using these technologies to get it.