Activity Tracking for Web Applications



Dealing with user activity in web applications is almost always an afterthought. To that, we should also understand that this is not something new and has been happening for quite a long time by major platforms and websites out there. 

I am no judge to say if it is a good practice or not, but as an engineer, I will try to note down the recent development in this space over the years. And, moreover, if you are tasked to do something similar for your new app, how you can go about doing it.


Let's talk about the basics

Our primary goal is to reliable track user's activity without affecting the application performance. Now, what is categorized as user activity is something we will address in a future blog, but regardless of the granularity of the data what is our concern at the moment is how we collect metrics data from a technical perspective.


Overarchingly, we have two kinds of data being passed around the server and browser. Namely, analytical data and transactional data. Our first step is to identify which request falls under which category. This is done to prevent us from degrading the performance of our application by prioritizing one over the other.


Once we have segregated the analytical requests, it is time for us to find the best possible way to communicate this data back to our servers. Few recommendations in terms of collection and transport of this data are given below:


Using Pixels

In some situations, third-party scripts can be replaced with image or iframe "pixels". Compared to their script-based counterparts, these pixels may support less functionality; however, because there is no JavaScript execution, they are also the most performant and secure type of tag. Pixels have a very small resource size (less than 1 KB) and do not cause layout shifts.

Pixels have been popular for quite some time now as, during the old days, it was considered one of the cheapest and the most reliable options out there to send HTTP web requests to a backend where the client doesn't need to consume the response. 

There is nothing wrong with consuming pixels, but my suggestion in case you are building your own  tooling, to consider using sendBeacon and fetch keep-alive as mentioned below

Using sendBeacon() API

The navigator.sendBeacon API sends a small amount of data over the wire to a web server in an asynchronous manner. It is intended to be used for sending analytics and metric data. This API helps avoid problems with legacy XMLHTTPRequest usage for sending analytics data.

This API can be used for sending data where the server's response does not matter. 

This API only supports POST requests and moreover does not support any custom header. But the good news is, it is supported by all modern browsers. This API ensures that data does not affect the performance of your application or next page as it does not block code execution during page unload. You can use the following script to send data at the page unload without affecting browser behavior.

Using fetch() keep-alive  

You can also use the popular fetch() API to send analytics data, but make sure to set the keep-alive flag to true in order to make non-blocking requests for event-reporting data. The keep-alive flag is supported by fewer browsers than the sendBeacon API so usage of this API is not recommended. 

Comments

Post a Comment

Popular posts from this blog

Web Development - Let's get started!

Image
Hello there, Thanks for joining me on my blog, and today I will be sharing the ultimate way to start Web Development with tweaks that I have learned from my experience. Well, it is going to be a rather long journey to cover the whole of Web Development so what I am thinking to do is splitting the whole post into logically divided small meaningful posts. So, right now you are reading the first part of my Web Development- Getting Started article. Well, without further adieu,  let's get started! In today's world, the Web resembles to be a place where we all live a virtual life. Ranging from social utilities like Facebook, Twitter to workplace web apps like Github, and Google Business, we experience a virtual touch every day. Well if we are surfing around a place for a while, visiting awesome stores (Amazon), and socializing in there with people we haven't met physically, then it is not a bad idea to buy a place there to live in. Well, most of you got what I am talking
Read more

How does URL work?

Image
Have you ever considered know how typing www.google.com on the very address bar of your browser land you to a page like this or ever stumbled upon to think what are those characters which make up a full length URL! If yes, then you are in the right place😉 While some of the URL or Uniform Resource Locator is simple like google.com or india.gov.in other full-length URLs might be a bit confusing, especially when it contains words like https, &, #, = et cetera. In this post I will show you what are the ingredients of an URL starting with the scheme itself, that is the word http://. The word HTTP stands for Hyper Text Transmission Protocol. It can be thought of as a protocol or sets of commands which are followed for transmission of web-pages. As a matter of fact, in this vast Internet, there are a lot of schemes like HTTP present. Some other protocols include FTP or File Transfer Protocol which asits obvious name suggest is used for transferring files from one machine on t
Read more

Slate - An afforable way to create websites which doesn't require a domain or hosting!

Image
Yes! you have heard it right. Last few days I was wondering how JavaScript Frameworks like Angular and React handle routing. After a brief study on the topic from sites like StackOverflow , I got a brief idea of how I could be able to read the U.R.L. parameters with the help of JavaScript. After which it was just a matter of time I came up with Slate. Introduction Slate lets you create amazing self-contained sites. It  takes HTML (or other data), compresses it into a URL fragment, and provides a link that can be shared. When it is opened, it renders that data on the receiver’s side. Features Slate Notes are contained entirely within their own link. This means they're...  💼 Portable - you don't need a server to host them  👁 Private - nothing is sent to–or stored on–this server  🎁 Easy to share as a link or QR code  Slate Notes can hold about as much as a printed page, and there is a lot you can do with that:  ✒️ Compose poetry  🛠 Create an app  🐦 Bypa
Read more