# Know your application users

## What is Microsoft Clarity?

**Microsoft Clarity** is a **free user behaviour analytics tool** designed to help you understand how people interact with your website. Here’s a concise summary:

* **Heatmaps**: Clarity generates heatmaps that reveal where users click, what they ignore, and how far they scroll on your site.
    
* **Session Recordings**: You can watch session replays to see real user interactions.
    
* **Integration**: It seamlessly integrates with Google Analytics and other tools.
    
* **Free Forever**: Clarity offers all its features at **zero cost**, with no traffic limits or forced upgrades.
    

In essence, Clarity empowers you to enhance your products by gaining valuable insights into user behaviour. 🚀 🔍

## Installation

1. Go to [https://clarity.microsoft.com/](https://clarity.microsoft.com/) - Get Started
    
2. Create account / Login
    
3. Create new Project
    
    1. Select Website as type
        
    2. Add **Name** for your project
        
    3. Add **Website URL** (the URL of your APEX application)
        
4. Select **Install manually** (and click on `Get Tracking Code` button)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701428346805/dafaea14-8d71-4580-83d3-59031568b409.png align="center")
    
5. Copy the script to your clipboard and paste it into the head of your APEX page.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701428760533/e9a46a69-01c3-4caa-9e73-3dbb4b04e039.png align="center")
    
    If you want it included everywhere in your app, add this code through `Shared Components` / `Application Definition` / `User Interface` / `JavaScript` after you have first saved the code as a **.js** file in `Static Application` or `Workspace` files.
    

## Analysing the results

Time to analyze the usage results. Go to Clarity's console and select your Project. You have a `Dashboard`, `Recordings` and a `Heatmap` as features. Here are some more details about each of them.

### Recordings

* You get a video recording of a user session.
    
* Each click is recorded too.
    
* You have the `live` option to see almost real-time users actions on the page.
    
* Each user gets a unique User\_id
    

There is an AI summary option, quite impressive, giving you details about the user actions if you don't have time to watch the full recording.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701438442210/be19dba6-a2fd-4f6b-95ea-0c849723a716.png align="center")

### Heatmaps

Heatmaps can be three different types:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701439933394/5b5c2e79-cd65-4f3b-8806-798d3623033f.png align="center")

* By the place, users have clicked with the mouse
    
* By the use of the scroll on the page
    
* By particular areas on your page
    

In all 3 cases, the heatmap follows this colouring pattern:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701440190074/ed251f5f-3750-41ef-b89b-0b12d563853b.png align="center")

* User Attention by area of the web page and heatmaps of user clicks - more clicks in a region means a darker colour on the heatmap. It also can display the order in which each mouse click has happened and the total number of clicks in certain areas.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701438867316/a3db816a-401e-4fca-a758-f9e227959f92.png align="center")
    
* On pages that have lots of content and can be scrolled, this can give you an indication of how often users reach certain place such as the footer information.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701443548007/f19ff44e-06ef-47b4-91f0-66af132bdfe4.png align="center")
    
    Probably the best feature that shows which areas have been used the most. The tool is smart enough to auto-detect important regions on your page, but you can also define them yourself.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701438703339/c1691b22-5762-46cf-a4f7-d4dc9c4df8fb.png align="center")
    

## Settings

Microsoft Clarity offers many settings you can play around with. Some of them are setting up a team, so you can work on the same project together. Integration with Google Analytics. Masking the user data. Block certain IPs from being included in Clarity. Data insights using AI and so on.

### Masking

There are three options available - `Strict`, `Balanced` and `Relaxed`. You can also manually specify particular **CSS** classes which will be masked. An example will be adding a **CSS** class named `mask_this` which is then added to the regions in your application that you want to be masked by Clarity.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701442904927/fb180b9f-5d49-4d07-96ca-83cd7e8a2a2b.png align="center")

### Copilot

Copilot helps you make sense of user behaviour on your website.

* Ask questions on Clarity data to get simple summaries
    
* Get concise takeaways on session recordings
    
* Ask questions on your Google Analytics data to discover trends
    

## Dashboard

Check these screenshots to get an idea of what the Dashboard looks like. Lots of information on it. You can get a rather good image of who and how is using your application. Best of all - it knows when they hit an error and shows you a recording of the user action that led to it.w

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701444104446/518d5c67-8dcd-49e5-b980-a1e16d8c575d.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1701444150112/d02f8f10-bde6-4756-98e0-2db212cafef9.png align="center")

## Why use it?

1. **User Behavior Insights**: Clarity provides detailed heatmaps, session recordings, and click tracking. By understanding how users interact with your website, you can optimize design, layout, and content placement.
    
2. **Identify Pain Points**: Discover where users drop off, encounter errors, or struggle with navigation. Fixing these pain points can lead to better user experiences and increased conversions.
    
3. **Conversion Rate Optimization**: Clarity helps you analyze user journeys, identify bottlenecks, and improve conversion rates. Whether it’s form submissions, sign-ups, or purchases, you can fine-tune your site for better results.
    
4. **Content Effectiveness**: Evaluate which parts of your content engage users the most. Are they reading your blog posts, watching videos, or clicking on product descriptions? Clarity reveals content performance.
    
5. **Free and Easy**: Clarity is **free forever**, making it accessible to businesses of all sizes. Plus, it integrates seamlessly with other analytics tools, allowing you to combine insights for a holistic view of your website’s performance. 📊 🔍
    

### Security and Data Privacy

As this tool collects users' interaction with your application or website, there are reasonable questions about Data Privacy and GDPR compliance. Here is what the FAQ of Microsoft Clarity says about that:

* ### **Is Clarity GDPR and California Consumer Privacy Act (CCPA) compliant?**
    
    Clarity is [GDPR-compliant](https://learn.microsoft.com/en-us/clarity/glossary-of-terms) as a data controller. Clarity also processes data in compliance with the [CCPA](https://learn.microsoft.com/en-us/clarity/glossary-of-terms).
    
* ### **What data does Clarity collect?**
    
    Clarity captures the user interactions on your website such as, how the page is rendered, and user interactions such as mouse movements, clicks, scrolls, and so on. The code to capture this information is open source and available on [GitHub](https://github.com/microsoft/clarity). You can also read a summary of [what data fields we collect](https://learn.microsoft.com/en-us/clarity/clarity-data). You can choose to mask your users' data.
    

📣 [https://learn.microsoft.com/en-us/clarity/faq](https://learn.microsoft.com/en-us/clarity/faq)

## Try it

Do you want to try it - no problem! Here is a link to a live Demo:

💻 [https://clarity.microsoft.com/demo/projects/view/3t0wlogvdz/dashboard](https://clarity.microsoft.com/demo/projects/view/3t0wlogvdz/dashboard)

## **Follow me**

Did you like this blog post?  
Follow me! 🔔

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684769855346/4a53f86b-e5ba-4c0b-bf79-0397a8f3c054.png?auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp align="left")](https://twitter.com/plamen_9?ref_src=hashnode)

[![](https://cdn.hashnode.com/res/hashnode/image/upload/v1684769877594/82a5de36-0e62-48e9-94d7-81620e92018b.png?auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp&auto=compress,format&format=webp align="left")](https://blog.apexapplab.dev/www.linkedin.com/comm/mynetwork/discovery-see-all?usecase=PEOPLE_FOLLOWS&followMember=plamen-mushkov)