When I first learned the basics of web development—HTML & CSS (and a tiny bit of JavaScript) — I never expected those skills would end up giving me an edge when it came to user tracking and analytics.
But, that’s exactly what happened when we decided to implement Heap, a powerful analytics tool designed to capture user behavior with minimal engineering effort.
What looked like a plug-and-play solution quickly revealed its need for someone who understood how the front-end was structured—how elements were built, how users interacted with them, and how to target those interactions precisely.
As I led the initiative to setup Heap across our entire product suite, I began to see how my basic web dev knowledge would be surprisingly handy.
Why does user tracking matter?
User tracking gets to the heart of product management. What are our actually users doing?
"How many times has [insert user] logged in?"
"Which pages are users viewing the most?"
"Have our clients started using the new feature?"
You get the picture.
Understanding user behavior across your application isn’t a luxury—it’s a necessity. These questions aren’t just helpful; they’re critical to making informed decisions.
How HTML, CSS, and Javascript helped me
I have thoroughly enjoyed Heap, so this article isn't a knock on the product AT ALL, but I do want to point out some things I have experienced.
Really and truly, you can do all the simple stuff with Heap's "visual labeling" tool. It's soooo nice and easy.
BUT... Heap and other user tracking tools market themselves as “no-code”, and that's fine and true for a while.
The reality is that eventually you will hit a wall, unless you have a solid understanding of how your front-end works.
Here’s how my basic web dev background came in handy:
Often with user tracking, it’s not just about knowing what users clicked—but what they were trying to do. A search bar is a perfect example.
By identifying the search input in our app using a selector:
input.form-control.input-sm[type="search"],
I was able to create a custom event with a Heap snapshot that tracked not just the interaction, but also the value being searched.
Once I had the aggregated data back from Heap's snapshot, I realized users were attempting to cross reference phone numbers in our app with numbers in an entirely separate system.
So, instead of having our users type the data in two places and check manually, I decided to build an integration between the systems, reducing time spent manually checking and improving accuracy of their searching!
The example above is just a simple selector, but I have implemented the same techniques using a bit of Javascript when things get a tad more complex.
Learning is the best!
Reduce friction. Delight the client. Learn a new skill.
Cheers.