Validating analytics events should be simple. It’s not.
If you’ve ever had to check whether events are firing correctly, you probably know the drill: trigger an action, open your debugging tool, click into an event, expand a massive JSON payload, scroll… scroll more… and hope the one or two properties you care about are actually there.
Then do it again. And again. And again.
Most of the time, you’re not exploring the data. You’re just trying to answer very specific questions:
• Does this event fire when it should?
• Does it include the right properties?
• Are those properties correct?
But the tools we rely on don’t optimize for that. They show the entire payload we send to segment and bid you good luck.
That is where I found myself nearly a year ago, when after a round of QA too many analytics tickets were filed. The system we had for checking events was just too error prone and bugs were getting past us.
So I decided to do something about it...
If you want the TL;DR here is the link to the Chrome Extension I built Analytics X-Ray
If it is broken, then fix it
I first made a list of the things I would want.
- Make it easy to spot the attributes that actually matter to me.
- Filter out noisy events
- Better timeline visualization
- No weird UI issues
Then I got to building it, or to be honest, Cursor and I got to building. This started as an internal tool and was the perfect opportunity for me to get used to using AI for larger sets of work.
And a few days later I had a good enough extension that made analytics debugging actually enjoyable. Well, at least for me cause I got to test out my new shiny tool.
And I got exited! Ideas kept coming and what originally was a very small MVP was now a fully fledged analytics tool.
Here are some of my favorites:
Easier to read timeline by:
- Color coding events by keyword: Page, View, Click, etc.
- Dividers on page navigation and reload for clearer separation.
Simplified view of an event by:
- Presenting the payload in nicer collapsible sections
- With color coding attribute types
- And property pinning for surfacing what matters to you.
Filtering events by:
- search event name, property key and values
- Hiding noisy events all together.
Standing the test of use
What started as a tool for myself turned into an internal tool for my team.
Gained great internal adoption
- over 70 weekly active users (almost all the Eng team)
- Used by Devs, QAs and Data.
- A lot of dormant analytics bugs were discovered.
Issues get caught earlier.
More features were added.
- Even branching out to other internal dev tool verticals
- The user experience got refined
I really recommend building internal tools, it has been a big improvement on our team's workflow.
Making it Open Source
After all those months of tinkering with the internal tool I felt like I had created something that could actually be very useful to the tech community and decided it was worth sharing.
The analytics portion of the internal tool in particular, what started it all, had potential to be generalized.
So with the idea in my head and all the learnings along the way I rebuilt it but with open source in mind.
And that is how Analytics X-Ray came to be.
If you use Segment on your day to day and any of what I said resonated with you. I invite you to check out the extension, here are the links:
Analytics X-Ray in the Chrome Web Store
Contributions are more than welcomed! Let me know if you try it out!