Microsoft Clarity provides website usage statistics, session recordings, and heatmaps; which are crucial items to review for customer experience optimization. Microsoft Clarity has come a long way in the last year since we wrote about it in Give Visitors What They Want: Website Heatmapping with Hotjar vs. Microsoft Clarity.
In the last year Microsoft has implemented new useful features while simultaneously improving the existing features. One big improvement we noticed was the session recordings, which are now more accurate. We will cover information about the new features including connecting your data with Google Analytics to get a 360-degree view of your customer experience.
As a best practice, we use Microsoft Clarity with all projects that use either Power Apps Portal Pages or Canvas Apps to help the client with better customer engagement. Microsoft Clarity is a great tool to assist in enhancing both customer and user experiences.
Currently, the integration is still not available for Model Driven Apps. Before we dive to the updates let’s talk a little bit about Microsoft Clarity.
Quick Introduction to Microsoft Clarity
Clarity is a free tool that provides heatmaps, recording for user sessions, and powerful website (and Canvas App) insights to help you make better design, interaction, and experience decisions. Create your team, collaborate, filter and segmentize data, and share without interruptions.
Gather information about user clicks, scrolls, hot and cold areas, page errors, and more than you can imagine without affecting your site speed or performance.
Microsoft Clarity doesn’t have any traffic limits or session limits while at the same time allowing unlimited team members and websites.
The mission of Microsoft Clarity is to provide make behavior analytics to everyone from bloggers to Fortune 500 companies provided as a free service.
New & Improved Microsoft Clarity Features
As you’re reading this article, you might think, Is Microsoft Clarity good enough to use? How is Microsoft Clarity a better heatmap tool than others? Does it even worth a try?
There are a lot of great new features and improvements on existing features. If it’s been over a year since you have seen or used Microsoft Clarity, you will immediately notice the difference.
If not, then no problem.
We’ve mentioned some great features and improvisations below.
Compare Mode
Compare mode divides your Heatmap screen into two sections where you can open the same link to compare different data or two links to review analytics. The section offers separate filters for both views to analyze and compare the data to make a better decision.
Not just that, Microsoft Clarity provides separate heatmaps for Desktop, tablet, and mobile; that’s why you can compare multiple screens for the same URL.
For now, compare mode is only available for the Heatmaps section.
Go to Heatmaps > Click Compare.
Clarity will enable a two-list view. Select URLs to preview the pages. To differentiate the controls, you will see two colors: blue on the left and pink on the right.
By default, Microsoft Clarity will preview the last three days’ data which you can change by clicking on the filter icon button next to the URL.
To exit the compare mode, click on any close icon.
After this feature, you don’t need to open multiple tabs to compare clicks v/s scroll or dead clicks v/s rage clicks, etc.
Just activate the compare mode to review the analytics and collect helpful information for better design and user experience decisions.
Integration with Google Analytics
This feature was introduced soon after the launch and has been helpful as you don’t need to search in Google Analytics for the link. Once the integration is active, Microsoft Clarity adds a new tab for Google Analytics in the navigation.
To make things easy, you need to access the session playback and click on more information to jump on the built-in Google Analytics Dashboard to understand more about your user pain points.
Once you’ve added your website project to Clarity, go to Settings > Setup.
Click Get Started.
Follow the instructions on the next page, such as adding your Google Analytics account credentials and then providing permission to Microsoft Clarity.
Clarity will automatically pick up the URL based on which project URL you’ve added in Microsoft Clarity.
Once done, it will change the status for Google Analytics Integration to Active.
To change the status, toggle active to inactive.
To disconnect, click on the disconnect link and remove the account.
Masking Content
Another helpful feature introduced in Microsoft Clarity is Masking. It has been handy to directly engage with the web user to review the trouble they are facing while entering the information.
Go to Settings > Masking.
Masking Modes
You can select between, Strict, Balanced, and Relaxed masking modes.
Strict masking mode masks all the text entered by the user.
Balanced only masked sensitive fields like passwords, credit card numbers, etc.
Relaxed mode doesn’t mask any field, so whatever the user enters in the field on your website, you can preview it in session recordings.
Mask By Elements
The best part is you can add specific elements that you want to mask or not. Click on Add Element.
Enter a CSS selector.
Then toggle between Mask and Unmask.
Blocking IP Address
Microsoft Clarity has also introduced IP blocking feature. This feature helps most to avoid sessions from the website team.
Go to Settings > IP Blocking > Block IP Address.
An impressive part here is if you want to block your IP, you need to hit the checkbox Block my current IP, which will quickly enter your IP Address field.
After that, add a friendly name so you can remember to whom that IP belongs.
Filters
Over time Microsoft Clarity has added more filters to provide better analytics for the session recordings.
Go to Recordings > Filters.
This update has allowed filtering of the analytics data at its best. Below is the list of all available filters for the data.
- User Info
- Time frame
- Device
- Browser
- Operating system
- Country
- Clarity user ID
- User Actions
- Rage clicks
- Dead clicks
- Excessive scrolling
- Quick backs
- Cursor movement
- Entered text
- Selected text
- Resized page
- Clicked text
- Page scroll depth
- Goal setup
- Path
- Entry URL
- Exit URL
- Visited URL
- Traffic
- Referring site
- Source
- Medium
- Campaign
- Channel
- Session
- Session duration
- Session click count
- Session page count
- Page
- Page duration
- Page click count
- JavaScript error
- Image error
- Page size
- Screen resolution
- Visible page
- Hidden page
- Customised Filters
- Customised tags
- Customised labels
Custom Labels
This feature allows to group the recording sessions.
Go to Recordings > Click on More Details (Which is available on all recordings cards on the left panel).
In the end, there will be a Labels section to add existing labels or create a new one.
By default, there are four labels, Bug, Interesting, Successful conversion, and Abandonment seen. Type text in the Field > Click on + Add Label to add a new label.
A new label will be added right away.
You can use these labels to filter the data. Go to Filters > Customised Filters > Customised Labels > Select the label.
Segments
When you add a filter, you have option to save it as a segment. You will be able to reuse segment to filter data around the Dashboard, Recordings, and Heatmaps.
As you add a filter, you will see Save as segment button appears.
If you have any existing segment, you can replace it by clicking Update existing or clicking Save as new to create a new segment.
Enter the new segment name, then click Save.
After saving the segment, you can use it from the Segments dropdown from Dashboard, Recordings, and Heatmaps tab.
Another impressive part is when you will visit the Recordings tab, and you’ve successfully integrated Google Analytics. You will see many predefined segments from Google Analytics in the Segments dropdown.
Dashboard Improvisations
Along with adding new features, Microsoft Clarity has offered new components to the dashboard.
Download Reports
You can quickly download your project’s analytics report in CSV, PNG, and PDF format.
Go to Dashboards > Download Icon > Select Download Option.
Content Insights
This section gives you top-level information on how your user interacts with the articles on your website.
You can find the content insights card on Dashboard.
If you can’t see it, you need to do additional steps to set up this feature. Usually, this feature automatically works for most WordPress websites.
To setup, you need to add an attribute data-clarity-region=” article” to the article element tag.
Interesting User Segments
Find the most valuable patterns or trends and quickly analyze data to identify practical takeaways.
Microsoft Clarity looks for two metrics to define interesting user segments, dead clicks, and rage clicks.
This information can be found on the Dashboard under the pie charts for dead clicks and rage clicks.
Website Benchmarking (Beta)
This feature doesn’t require you to setup an account with Microsoft Clarity.
Microsoft Clarity’s team has created an interactive report that shows data from billions of anonymous user sessions for the sites in English and Japanese.
It showcases user behavior and trends from 14 site categories where you can visualize the metrics for each site category or compare up to two types simultaneously.
This data allows you to compare your site metrics to measure how much you need to improve.
They covered page speed, active time per session, pageviews per session, traffic trends, browser breakdown, user device distribution, traffic channels, and a lot more.
You can try out the free beta version here https://clarity.microsoft.com/benchmark.
How to Sign up for Microsoft Clarity?
Signing up for Microsoft Clarity is easy. Just follow the steps below to sign up.
- Go to https://clarity.microsoft.com, then click on the Sign Up button in the header.
- Select how you would like to sign up. Clarity allows you to sign up with your existing Microsoft account, Facebook, and Google.
- Based on your selection, you will be redirected to the login page. Enter your correct credentials to login. Once done, you will be redirected to confirm your email and setup your first clarity project. Enter a project name and website URL to add a new project in Microsoft Clarity.
- After adding a new project, you will see ways to install Clarity code manually or on supported third-party platforms or share the code with your developer via email.
How to Install Microsoft Clarity to your website?
Installing Microsoft Clarity takes less than a minute. Once you sign up, you will see the screen mentioned above. To install manually, select the first option, Get Tracking Code, to get a tracking code for your website.
Remember to paste the code into your site or app’s <head> element.
Once you’ve installed the code, it will take up to 2 hours before you see any data on the Dashboard.
Please follow its documentation link below to learn more about how Microsoft Clarity works.
Documentation for Microsoft Clarity – https://docs.microsoft.com/en-us/clarity/
We hope that you’ve found this post helpful. Please take a step ahead to share this article with your network. Feel free to contact us with questions or concerns about this article.
