Analyze your WebApp using Microsoft Clarity
Tags: javascript, product, typescript, microsoft
Published: 2023-11-19 18:53:38

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.

![Image of home page of the microsoft clarity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54vxu3vow62bur7bmk1a.png)

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:

![Image Creating your project on Clarity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ci0qx694ygd0se4k8zju.png)

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:

![Image of script that Clarity will generate for you](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ejhlkm8ptlex7muj6zm.png)

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:

![Image of dashboard of clarity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/234zei5cu0gnl0ktmavp.png)

![Image of dashboard of clarity where I can see the devices](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r81c7xl8bcygmvhpp6rh.png)

### 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.

![Gif Image of Session Record Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgi28b692c4o63gkvhyz.gif)

### HeatMap

Generate automatically for all your pages. See where people click, what they ignore, and how far they scroll.

![heat map of clarity example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o60y7ntwkt3n1n6trtnw.gif)


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...

![That is all folks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxqprj1wb41sq207n6ym.png)