Hi people, it's nice do have you again!
Today I want to introduce you the Microsoft Clarity, an open source, free tool that captures how people use your site. Setup is easy and you'll start getting data in minutes.
The Microsoft Clarity contains some feature that are powerfull, such as HeatMap of your site, sessions capture records real time, insights and much more. And again, is totally FREE.
Clarity offers some integrations with another tools, for example, Google Analytics.
You can create an account or sign up on Microsoft Clarity using your Google Account. After that you can create your project:
So, if you have a Webapp created, just click to integrate manually in your app. Just add inside of your <head> the <script> that the Clarity will generate for you:
AND EASY PEASY!!!
Your app is integrated with Microsoft Clarity, and tracking all the users behaviour in your app.
For example, I have a Landing Page (created using Next 14) that I'm developing for an event FrontIn Campinas 2024 that I'm organising.
Dashboard
After the integration I can see some insights on main dashboard:
Session Records
You can watch how people use your site. Explore what's working, learn what needs to be improved, and test out new ideas.
HeatMap
Generate automatically for all your pages. See where people click, what they ignore, and how far they scroll.
Amazing, right?
I strongly recommend using the Microsoft Clarity for analyses your users behaviours. It is very important to have clear if your app is usable and capture some product metrics. And also, again, is totally free and easy to integrate in your webapp or mobile projects.
Anoter option and it is similar with some feature of Clarity is Hotjar (I will show in another article). But I like of Clarity because of the real time session records and events.
And some tip: Even though you are Frontend or Backend Developer, is very important that you have some ideas how your app is being used. Collect metrics and track users' journeys, collect error and success metrics for your application. (Even if you have the product team!!!). Engineer, Design and Product Teams should work together to build a product usable, reliable and affordable.
I will write some artiles talking about some another tools to track some metrics on the frontend. Such as Sentry (Errors Monitoring Observability Tracking), Amplitude (Product Events Capture), Hotjar (Similar to Clarity).
I hope you liked!
Stay safe guys ❤️
Contacts:
Linkedin: https://www.linkedin.com/in/kevin-uehara/
Instagram: https://www.instagram.com/uehara_kevin/
Twitter: https://twitter.com/ueharaDev
Github: https://github.com/kevinuehara
Youtube: https://www.youtube.com/@ueharakevin/
Aaaaand...
Top comments (1)
Great contribution Kevin, thanks for sharing. I didn't know about it, definitely I'll use it in my project.