Clarity, free heat mapping and video recording sessions

Clarity, free heat mapping and video recording sessions
Microsoft Clarity Heat Map

Clarity records in real time various user interactions on your website, e.g. how the page is rendered, interactions such as mouse movements, clicks, scrolling, etc. and returns reports, heat maps and video session recordings.

Links to the recorded sessions can be shared with members of the project team or anyone else by generating a temporary public link that allows the video to be viewed for up to thirty days.

Clarity, free heat mapping and video recording sessions 1

Archived heat maps up to 13 months old can be accessed.

Record up to 100,000 sessions per project per day with recordings retained for 30 days from the time of capture. However, favourites and a randomly selected recording are retained for up to 13 months.

This service can be accessed from Microsoft's"Webmasters Tools", the equivalent of Google's Search Console, or from Clarity's website where you can see a live demo and to activate it just place a javascript code in the head of those pages you want to be tracked.

There are two things I was interested in knowing about this service, how Microsoft manages privacy, the data collected and its impact on performance if it affects the loading speed.

To find out I have been testing it for a few hours because normally this kind of services are paid and not cheap, but Microsoft offers it for"free" with no traffic limit. You know how this is paid for, in exchange for the transfer of the data collected.

Although the test time was relatively short, the heat maps and session recordings that were generated were quite faithful to the real behaviour of the different sessions that I recreated for the test.

Another interesting point is their Chrome extension called Clarity Live for quick access to user interaction with your site in real time. You can view instant heatmaps, area maps and stored recordings of any page of your website you are on.

Once installed, activated and logged into your account you'll see these three blue icons in the top right and one click is all it takes to see the metrics in question.

Clarity, free heat mapping and video recording sessions 2

Here we find some new metrics called "area" which are displayed above some coloured boxes with the percentage of clicks.

Clarity, free heat mapping and video recording sessions 3

Privacy and GDPR

Microsoft claims that Clarity is GDPR compliant as a data controller and for more information they refer you to their privacy policy, however there is no trace of a native option to give the user the option to refuse these cookies before they are set and then revoke consent for the cookies used to provide this service.

By default, Clarity's tracking code is placed in the HTML header of the page. It loads immediately, i.e. before the user can indicate whether he/she accepts the use of cookies.

To change this setting , follow these steps to stop Clarity's tracking code from setting cookies immediately, and then set a signal to indicate when it is OK to set cookies. If you use a cookie plugin, consult its documentation on how to integrate a third-party script.

What is possible is to mask the confidential text, for this from the configuration we can choose between three levels of masking.

Clarity, free heat mapping and video recording sessions 4

If you choose strict masking you won't see a word in the heatmaps. The "Balanced" option hides any sensitive text that may have been entered and still shows the content in case you need to know which link was clicked.

Clarity, free heat mapping and video recording sessions 5

The code to capture the information that is collected is open source and available on GitHub and over here is the detailed reporting of the data that is captured.

To comply with GDPR you must clearly inform your users in your privacy policy about how and what Clarity (and any other similar service) is used for on your website.

Microsoft suggests this text as a starting point:

"We partner with Microsoft Clarity and Microsoft Advertising to capture how you use and interact with our website through behavioural metrics, heat maps and session replay to improve and market our products/services. Web site usage data is captured using proprietary and third-party cookies and other tracking technologies to determine product/service popularity and online activity. In addition, we use this information for site optimisation, fraud/security and advertising purposes. For more information on how Microsoft collects and uses your data, please visit the Microsoft Privacy Statement."

Impact on performance

In their FAQ section, to the question of does Clarity overload my site, they only say this:

"No. Clarity has been designed with performance as a top priority. So there is no noticeable impact on the end users of your site".

As the video session recordings, heatmaps and reports are hosted on their servers, the only test that can be done is to look at the JS behaviour of the tracking code and I found nothing to indicate that it was adding load time beyond the usual addition of an external request.


It works pretty well, it can even be useful to detect javascript issues on your page and possible malfunctioning of some elements and it doesn't have a worrying impact on performance

What I don't like is that you can't offer the user a native option to not accept tracking cookies or to be able to manage their consent at any time in a simple way.

It's an interesting tool, especially for discovering usability bottlenecks, but it would be even better if it included a tool for visitors to manage and administer consent permissions at any time.

The only possible option they offer for deleting data that has been stored in their Microsoft Azure cloud service is to delete the project.

Clarity, mapas de calor y grabación de sesiones en vídeo

Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting