It’s always exciting to see a new web analysis tool enter the market – especially when it’s 100% free – as it brings with it the possibility of innovation and new features that shed more light on how well your website is performing.

It’s a topic we have researched and discussed extensively last year. And the excitement is amplified when the company behind such a tool is none other than tech industry giant Microsoft.

What is Microsoft Clarity?

According to Microsoft, Clarity is “a free user behaviour analytics tool that helps you understand how users are interacting with your website through sessions replays and heatmaps.”

At a glance, Clarity comes equipped with an impressive range of features, including but not limited to:

  • Session recordings so you can watch exactly how users are interacting with your site
  • Heatmaps, which allow you to see the volume and location of clicks or scrolls on any given page
  • A cleanly presented dashboard providing an overview of common key metrics such as volume of sessions and top pages, as well as uncommon ‘friction’ metrics such as ‘rage clicks’ and ‘dead clicks’
  • Powerful filtering options that enable laser-focused analysis and the ability to customise these filters with Custom Tags
  • Suitability for large websites, capable of processing one petabyte of data from 100 million monthly users
  • No data sampling

This list of features certainly sounds enticing. But if you’re like us, you still have more than a few questions…

Should I be using Clarity? How do I set Microsoft Clarity up? How do I use it to find real insights? And perhaps the more GDPR aware among you will be wondering about compliance and privacy too.

How Do You Install Microsoft Clarity?

You can sign into Clarity using your existing Microsoft, Google or Facebook account.

Once you’re set up with an account, you will see that Clarity is organised by what are called Projects.

Generally, you will create one Project per site you want to track - one user account can have multiple projects within it.

In terms of installation, Clarity is like many other web analysis tools out there, requiring a code snippet to be inserted into the <head> element of your site’s source code.

This can be done by directly editing the source code (usually requiring a web developer) or, easier still, via Google Tag Manager if you have it.

Microsoft also provides instructions for how to install Clarity on a plethora of common third-party platforms, such as Shopify, WordPress, Square Space and more.

How Do You Use Microsoft Clarity?

An Introduction to Microsoft Clarity

One great part about Clarity is its clean, minimalist user interface. You’re not confronted with an overwhelming landscape of numbers and tables, which can lead to paralysis, particularly for new users.

Instead, you will be greeted by an array of simple charts, which are easy to read and digest.

Included here are some standard metrics and tables you’d expect from any web analysis solution. You have the likes of:

  • Sessions
  • Pages per session
  • Scroll depth
  • Popular pages
  • Referrers
  • Breakdown by device
  • Breakdown by operating system
  • Breakdown by browser
  • Breakdown by country

Here you will notice some overlap with report metrics in Google Analytics. While Clarity may not go into as much depth as Google Analytics, it’s worth noting that Clarity has a different point of action.

Clarity’s main focuses are on a small number of key data points, which keeps things concisely focused on user behaviour.

Microsoft Clarity: User Behaviour Analytics

Let’s look more closely at some of the unique, user behaviour orientated metrics, which Clarity has to offer:

Dead clicks – user clicked on a page with no effect.

Rage clicks – user rapidly clicked the same small area.

Excessive scrolling – user scrolled through a page more than expected.

Quick backs – user navigated to a page then quickly returned to the previous one.

JavaScript errors – the percentage of sessions that have JavaScript errors.

These ‘friction’ metrics are great for flagging design or technical problems with your site. You can also click on any portion of a doughnut chart, or bar of a bar chart to filter the entire dashboard.

For example, you can click on the purple section of the Dead clicks chart, to only see sessions including dead clicks throughout the entire dashboard.

You can also click on the ‘Recordings’ button to go straight to recordings of sessions where Dead clicks occurred.

Speaking of filtering the dashboard, what we’ve seen so far is just the tip of the iceberg. Take a look at all the filtering options you have at your disposal:

Take a moment to look through the filtering options on offer. With this level of granularity, you can drill down in pretty much any way you could ever imagine for laser-focused analysis.

But even this is not the extent of your options, as you can create custom filters to segment your data. This is achieved by adding Custom Tags to your site.

Microsoft Clarity Custom Tags

It’s worth pointing out that these customised filters are available to segment your dashboard and session recordings and not your heatmaps.

Let’s take the example of an eCommerce site. It would be very useful to be able to segment your dashboard and session recordings by users who have completed a transaction – a Custom Tag allows you to do this.

To summarise without delving into technicalities, the process involves inserting a code snippet in the relevant place in the site’s code, which will pass the information through to Clarity.

This ability to pass custom information is one of the most exciting features of Clarity - it opens so much potential for tailoring your setup, making it fit your specific requirements.

For more technical information about how Custom Tags are configured, you can refer to Microsoft’s documentation.

Microsoft Clarity Session Recordings

Session recordings are arguably the most powerful feature of Clarity. What better way of understanding how your users interact with your site than to watch them do so?

Again, the user interface here is clean and the recordings buffer fast.

Let’s look at the basic controls:

Having the option to skip inactivity and increase the playback speed is necessary if you’re going to be watching a lot of recordings.

Every specific action such as clicks and the friction events we saw in the dashboard earlier, like rage clicks, are marked on the timeline so you can quickly skip to them and get an idea of how many took place in the session.

The summary positioned to the left lets you see a good amount of information about the session:

For a complete breakdown, you can click ‘Timeline’ to see all the session information and a chronological log of all the events that occurred within the session.

You’ll be pleased to hear that you can also filter your session recordings with the same degree of precision.

For example, if you would only like to see sessions of people using Safari – perhaps you suspect a certain element of the page isn’t loading correctly in this browser – you can easily do so and investigate your theory.

Microsoft Clarity Privacy Concerns

Some will no doubt be wondering about the privacy implications here, but you needn’t worry. Clarity will automatically mask usernames and passwords etc. and it appears to be strict with its masking criteria by default.

You can however select between three levels of masking:

Those who want to be particularly cautious have the option of using the ‘Strict’ settings, so no input goes unmasked.

The additional option of masking or unmasking specific elements is a bonus. This is done by adding an attribute in your site’s source code and may require a web developer.

Microsoft Clarity Heatmaps

Heatmaps in Clarity tell you where on the page users have clicked or, alternatively, how far down the page users have scrolled.

Let’s look at an example of a click heatmap:

By hovering over the coloured spots on the map you can see the exact number of clicks and the percentage of total clicks this represents.

This offers you a rich overview of how people are really behaving and interacting with your site.

It’s a very visually intuitive form of analysis that you just can’t get from reading tables or graphs.

One convenient aspect of this feature is the list of elements by click volume on the left side of the screen.

Here is what the scroll heatmap looks like:

You can see how the further down the page you look, the fewer users scrolled that far during their visit.

This is perfect for gaining insights on your site performance, particularly in situations where scroll depth matters.

For instance, you could judge how effective an article is by seeing how many users scroll down to read the entire piece. Or perhaps you have a newsletter signup form below the fold of the page and you’re not sure how many users are even seeing it.

Clarity can help give you insights into exactly these types of questions, and many more.

Again, we have useful information to the left, displaying the volume of users and the percentage by each 5% increment of scroll depth.

When it comes to filtering your heatmaps, other than the very handy toggles for switching between device types, you also have access to the aforementioned filtering options.

Utilising these filters will allow you to scrutinise how different types of users are interacting with your site. Or you can simply change the page you’re viewing with the text box in the top left.

Final Thoughts

Clarity offers a concise set of powerful features to analyse user behaviour.

The fact that it’s free, doesn’t sample your data, has such powerful filtering options, and includes unique friction metrics makes Clarity stand out among the other user behaviour analysis tools out there.

If you’re not ready to install it on your site yet you can always explore the demo account.

We can help you install and get to grips with Clarity, if you feel unsure on any of these points please don’t hesitate to get in touch.