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

MCD Model of Leadership

Image
The MCD model of leadership consists of three main stages: Managing Coaching  Delegating Almost 54% of business leaders do not have the knowledge of these 3 stages involved in Leadership and the rest of them even though familiar with the concepts don't really have any idea of when to adhere to which stage mentioned above. Courtesy - Inc Magazine Let me lay down the steps that are involved in each of the following action categories: Managing (Zoom-in) Close Supervision Control Direct Instruct One-way communication Testing Feedback Coaching (Zoom-mid) Feedforwarding Involve Develop Encourage Listen Support Facilitate Awareness Delegating (Zoom-out) Accountability Responsibility Support Praise The MCD Model helps a business leader tackle the following problems in day to day business: Losing a member of the team Disengaging with the team members and ideas Loss of productivity Loss of opportunities
Read more

Easy Speed Optimization for Web Developers

Image
A majority of the web is still accessed via slow 2G networks, so when it comes to web speed optimizations, developers should take the responsibility to make their web apps as optimized as it could possibly be. Most of you might think that increasing speed performance trades of with user experience. Well, frankly speaking, most of the time it does, but it doesn't need to be that way! In this article, I will be sharing top 3-speed optimization strategies which will help you bring a smile to your users face even on slow network speed. 1. Images Images should be the appropriate format, compression, and size; and loaded only when necessary The images commonly contribute to a majority portion of your website. Thus, it is very important to serve your static images in an optimized and performant way. To be successful with images, it is necessary that you automate and systemize them. Checklist : Appropriate format Appropriate compression Appropriate for display size and dens
Read more