Microsoft Clarity Tool Review
Microsoft Clarity Analytics Overview
Microsoft Clarity is a new and free tool from Microsoft that helps to track the site user's behavior, user's experience, and the site’s performance.
Clarity is a user behavior analytics tool that helps you understand how users are interacting with your website through features such as session replays and heatmaps.
Microsoft Clarity vs Google Analytics
It looks a lot like this is Microsoft’s version of Google Analytics, but in reality, it is much more focused on the user behavior, site performance, and conversions, and less on the SEO aspect.
The main features of the Microsoft Clarity tool are:
Insights
Session recordings
Heatmap of clicks and scrolling.
With the help of these two features, we can replay user sessions and explore heatmaps to make the website work better for the customers and business.
How to set up Clarity for our site?
Microsoft Clarity is very easy to set up, especially if you have experience with setting up a Google Analytics account.
When you first open the Clarity account, the first thing that opens up for a project are settings, that have 4 sections:
Overview,
Team,
Setup, and
Masking.
Clarity Overview Setting
In the overview section, you need to add a project name, website URL, and you need to select the site category.
Clarity Team Setting
In the team section, you can invite team members to the project.
Clarity Setup Setting
In the setup section, you have the opportunity to install Clarity on your site.
In the beginning, you have the instructions on how to install the Clarity for different platforms, like for example:
Adobe Dynamic Tag Manager (DTM)
ClickFunnels
Google Tag Manager
Shopify
Squarespace
unbounce
Weebly
Wix
WordPress / WooCommerce
But, what basically you need to do is to copy a tracking code from there and past it to the head (between <head></head>) section of your site’s HTML.
Microsoft Clarity for WordPress
Except for WordPress, where you can install Clarity with a WordPress plugin.
You can only add a new plugin that you can search on the plugins directory with the name 'MS Clarity' and you need to install and activate the plugin.
After that you need to go to your Project on Clarity, go to Settings, and click on the “Install tracking code on third-party platforms” and it will open up names of different platforms, then click on the WordPress / WooCommerce and it will open a new pop-up window.
At the top of that pop-up window, you will see your Clarity project ID which you need to copy, and then past it on the Clarity plugin settings on WordPress and click “Save Changes”.
This way, your WordPress site is now configured for Clarity behavior tracking.
After you do this you need to wait up to two hours for the data to show up on the project.
You also have the option to integrate the project with the Google Analytics account of your site.
To do this you need to give permission to Clarity to view the data of your Google Analytics account.
Masking Setting
A masking section is a place where you can choose to mask your site’s text to the Clarity tool.
You can choose between strict, balanced, and relaxed options.
You can also select to individually mask a CSS element of your site.
Clarity Insights
With the insights, we can find interesting user sessions and find out about problems like clicks that go nowhere, rage clicks, and excessive scrolling.
You can view the data for today, the last 3 days, the last 7 days, the last 30 days and you can also set up a custom time to view data for a site.
The main things to view on the insights screen are:
Sessions
Sessions - you can view total sessions, distinct users, pages per session, scroll depth, and engagement.
Dead Clicks
Dead Clicks - which are clicks that the user has clicked or tapped on a page with no effect. Here we can see the percentage of dead clicks per session.
Rage Clicks
Rage Clicks - when the user rapidly clicked or tapped in the same small area. We can the percentage of these rage clicks per session.
Excessive Scrolling
Excessive Scrolling - when the user scrolled through a page more than expected.
Quick Backs
Quick Backs - when the user navigated to a page then quickly returned to the previous one.
Popular Pages
Popular Pages - as the name suggests, here we can see the most popular pages of the site for the period we selected,
Referrers
Referrers - Here we can see domains of sites that have referred users to our site.
Browsers
Browsers - the percentage and numbers for the type of browsers that users used to visit our site.
Devices
Devices - the percentage and numbers for the type of devices that users used to visit our site.
Operating Systems
Operating Systems - the percentage and numbers for the type of operating systems that users used to visit our site.
Javascript Errors
Javascript Errors - this shows us the percentage of sessions that our pages that showed javascript errors to the users.
Countries
Countries - this shows from which countries our site users visited the site.
Session Recordings
Same way as with the insights, here also we can set up the custom period to see the data.
On the left of the screen is a sidebar where you can see all the sessions that your site users visited your site.
At the top of this left sidebar, you can sort the data based on the date, duration, clicks, and pages.
Before we click on a session, we can see the entry page, exit page, how many pages a user has visited during the session, session duration, the number of clicks or taps per session, country from where the user visited, his type of device and type of operating system.
When you click on the session, on the right side of the screen you can watch the session playback individually for each session.
You can set up the video to skip inactivity (while the user was inactive during the session) to not lose too much time examining.
You also have video controllers, like play, pause, rewind (10 seconds), and fast forward (30 seconds).
If you click on the button named “Timeline”, a box with text will appear on the left sidebar that will show us all the events during the session and their exact time in the playback video, like visited, resize, click, etc...
This can help us to examine user behavior as it happened.
Heatmap of Clicks and Scrolling
What is a heatmap?
Heatmaps show you an aggregate of where visitors click their mouse on desktop devices and tap their finger on mobile devices while visiting a website.
Detailed heat maps show you where users clicked and scrolled, and how they moved around the site.
There are three types of heatmaps:
Clicks - shows us where users have clicked on the desktop,
Taps - shows us where users have taped on the mobile or tablet, and
Scroll - shows how far our users have scrolled down the page.
The map is color-coded to show the elements that have been clicked and tapped the most (red, orange, yellow).
Now, on the Clarity tool when we enter the heatmap page, on the top we can see the filters where we can select different filters, like time-frame, insights data, etc.
Also, there is a form where we can write the URL of the page that we want to analyze.
The screen again is separated into two sections, the smaller left sidebar, and the right section, just like in the session recordings.
On the left sidebar, we can see the site elements from the site layout ranked by the most clicks.
On the right sidebar, we can see the page we have chosen to analyze, but on top of that, we have the options to select if we want to analyze that page for the users that visited that page from desktop, tablet, or mobile.
Also, there is an option to choose between clicks and scroll.
When we select to view clicks, we can see a heatmap also known as a clickmap.
On the page, we can see some yellow dots presented there and when it comes to clickmaps, every dot you see represents a click.
This how we will know which part of the page attracts more clicks, and we can make adjustments on the page to increase our conversion rate.
When we select to view scroll, we can see a heatmap also known as a scrollmap.
Scrollmaps show us the aggregate data in percentage of how low on the site the users have scrolled to view the content.
Now, on the Clarity tool when we enter the heatmap page, the screen again is separated into two sections, the smaller left sidebar, and the right section, just like in the session recordings.
In the left sidebar, we can see the scroll data in a table with these columns,
%scrolled - in the rows are presented the percentage of scrolling through the page,
# of visitors, - here we can see the number of visitors for each scrolling percent in a row,
% of visitors - here we can see the number of visitors for each scrolling percent in a row.
This shows us how much our site visitors have scrolled through the page we have decided to analyze.
Based on this we can make the necessary changes on the page to increase our conversion rate.
Conclusion
The Microsoft Clarity tool is a very good free tool that provides us with data about our site, which can help us very much to improve our site’s user experience, performance, and conversions overall.
