Building Unisala: A Tale of Analytics | Series 2

Lessons from Analytics and Performance Challenges

For a long period of time analytics was overlooked. This is where we were doomed. I once asked a senior, who is SDE II at Amazon, what the difference between other companies he worked vs Amazon? And answer has stayed with me rent free:

Those tech giants pays huge attention to analytics, metrics and monitoring.

What gets measured, gets managed!

I have not worked with any tech giants yet, but what i can say with certainty that if i ever work on any project, setting up the metrics and analytics is what i'd prfioritize in the first day.

For a long long period of time, we didn't utilize analytics. Features and stories were crafted to create values for users, followed by long development cycle and iterations. At the end we didn't know how successful it was?

How doomed were we?

Running an experiment without measuring the results of the experiment.

Sounds funny? It's not funny it's just wasteful & a bit tragic!!

Running experiments without measuring results is like shooting arrows in the dark.

Next Phase Integrating Analytics At Unisala:

The most overlooked mistake we made was neglecting analytics.

Intiatally we added google analytics, which helped us only measure

1. how many active users there are in the site.
2. Users based on different countries
3. Page views and

We also added Microsoft clarity, It struggled because

1. Client side rendering in React limits how analytics tool capture the data,
2. App bundling was not done right, so essentials assets like CSS were missed make the page look wacky.

So Microsoft clarity couldn't properly capture our poorly designed websites.

As the result:

Visual Breakdowns:

• Missing or delayed CSS can cause significant usability issues and distort how analytics tools like Clarity interpret the page layout. For example, elements may be misplaced.

Incorrect Data Capture:

• Analytics tools may log phantom clicks, misplaced heatmap data, or incomplete session recordings because they rely on a misconfigured or partially rendered DOM.

Nevertheless, As soon as we introduced analytics, an entirely different story unfolded. Analytics revealed insights we had completely missed.

1. Poor user retention
2. Performance Issues: The app was crazy slow for the first time user.
3. Poor User Interface:
4. Ionic website felt clunky, unpolished, lacking smooth user experience.

The dumbest mistake we made was relying solely on personal feedback from users who knew me personally to learn about errors. Until they told me, i had no clue what was going wrong.

For instance, during account setup, an error once halted registration process, a critical step to accessing the app itself. This meant most users were completely deprived of the service because of our inexperience and lack of proper monitoring systems.

It was harsh lesson in just how crucial accountability, error tracking & user feedback mechanism are in building functional platform.

However, As we exposed the platform to real users, we encountered major challenges.

How our production looked at this time?

The code we were shipping was not obfuscated. The bundling was completely missed. So anyone that can load the website can download our source code.

Source Code Visibility:

Risk: Without obfuscation or minification, your source code is exposed to anyone who accesses your website. This makes it easier for attackers or competitors to:

1. Understand your application logic.
2. Reverse-engineer sensitive operations.
3. Exploit potential vulnerabilities.

Larger Bundle Sizes

 Lack of bundling & code-splitting leads to larger files being served to the client, which impacts:

• Slower Page Load Time time: Slower initial load times
• reduce user experience
• SEO performance.
• Increased network bandwidth usage

Security Implications

• API Endpoints: Implementation of apis can be exposed.
• Sensitive Configurations: Environment variables or configurations mistakenly included in the client bundle are exposed easily.

This cost unisala as huge fortune. Once the unauthorised access through leaked access key incurred a bill of 13000$. Which we will cover in a separate topic.

How was the performance with Ionic React?

The unisala.com was was 6MB, leading to first-time load times exceeding 2 minutes on 3G networks. Most of the user feedbacks were the site was not loading/ down.

• SEO Limitations:

Ionic react relies on client side rendering (CSR), which react does by default. This approach was a poor fit for an information sharing app like Unisala. Anyone fetching the site is given a blank canvas of DOM at the beginning. Then once the js executes the content are fetched. Search engines struggles with this approach making it harder to index the content, making nearly impossible for users to discover articles organically.

• Clunky UI/UX:

Mobile-first design feels cluttered and outdated for web users. The view did not look sleek like other modern application would look like.