Microsoft Clarity is a powerful, no-cost solution that allows you to capture and replay user sessions and explore heatmaps to make your website work better for your customers.
To get started, all you need is a Microsoft, Facebook, or Google account.
Why Use Clarity?
The unique features of Clarity, which help you understand user behavior include:
- Simple and easy customization.
- Won’t get in the way of your site’s performance.
- Data is analyzed and ready to view in near real-time.
- No limits on the number of sites per account.
- Limitless scalability.
- No traffic limits on these sites.
- Deep AI and Machine Learning.
- No sampling.
Clarity Usage Scenarios
Clarity can be best used but not limited to:
- Helping make data-driven decisions based on what strategies work on your website and those that do not.
- Test what content works best and where to place it on your page.
- Understand confusing elements of your webpage.
- Identify user behavior and add required content to your page.
- Test and publish new ideas on to your webpage.
- Study user clicks and scrutinize the requirements.
- Visit the Microsoft Clarity website and sign up.
- Confirm your email and accept the terms.
- Name your project, enter your website address, select a category, and click ‘Create’.
At this point, you’re ready to set up the method you’ll use for tracking your visitors, and the path you choose for tracking basically comes down to personal preference and your specific environment, but we’ll cover each of the options.
Masking is the prevention of sending a text to the Microsoft servers, and by default, Microsoft Clarity operates in Balanced mode, masking all sensitive text, such as email addresses and info entered by users, like passwords, address info, payment info, etc.
Clarity makes it easy to flip between Strict, Balanced, and Relaxed mode, depending on your needs.
Furthermore, you can mask any element on your website, by targeting a particular CSS selector.
For example, if you had a Single Listing block that contained information you didn’t want to send to Microsoft, you could assign a CSS ID or CSS Class to it, and then specify that assignment in Clarity.
IMPORTANT: Clarity should not be used on sites that contain sensitive data including user health care, financial services, or government-related information.
As always, I advise keeping the overall number of plugins to a minimum. If you have already implemented one of the solutions below, let’s go ahead and use one of them to implement Microsoft Clarity.
Once you have completed your desired implementation path, please note that it may take up to 2 hours to start seeing your website visitor data populating in your Clarity dashboard.
If you happen to already be using SEOPress, be sure to check out the How To Configure SEOPress For WordPress Websites guide for some super simple steps to set up Microsoft Clarity.
If you happen to already be using Perfmatters, you can use the simple steps below to implement Microsoft Clarity.
- Microsoft Clarity > Setup > How to install Clarity > Clarity tracking code > Click the ‘Copy to clipboard’ button to copy your tracking script.
- WordPress Dashboard > Settings > Perfmatters > Assets > Code > Add Footer Code > Paste your tracking script and save changes.
Google Tag Manager
If you have yet to set up Google Tag Manager (GTM) for your website, be sure to check out the Google Tag Manager for WordPress Websites guide.
- Sign into Google Tag Manager.
- Click on the ‘Tags’ tab.
- Click ‘New’.
- Name your Tag ‘Microsoft Clarity’ or similar, for easy future reference.
- Click on the ‘Tag Configuration’ card.
- Under Choose Tag Type > Custom, choose ‘Custom HTML’.
- Paste in your Clarity Tracking Code, which can be found in your Microsoft Clarity dashboard, under the ‘Install tracking code on third-party platforms’ section.
- Click the ‘Triggering’ Card’ and click ‘All Pages’.
- Click ‘Save’.
- In the top-right portion of your Tag Manager dashboard, click ‘Submit’, click ‘Publish’, and then click ‘Skip’.
At this point, we know that Google Analytics (GA) is correctly working on your website, so that also means Microsoft Clarity is successfully tracking, as it’s piggy-backing off of GA.
If you have yet to set up Google Analytics for your website, be sure to check out the Google Analytics for WordPress Websites guide.
- From the ‘Setup’ tab of your Microsoft Clarity dashboard, scroll to the bottom section click on ‘Get Started’, under the Google Analytics Integration.
- Sign into the Google account used to manage Google Analytics for your website.
- Grant permissions to Microsoft Clarity, by clicking ‘Allow’, three times.
- Choose the website to connect to and click ‘Save’.
Microsoft Clarity WordPress Plugin
- From the ‘Setup’ tab of your Microsoft Clarity dashboard, expand the ‘Install Tracking Code on Third-Party Platforms’ option.
- Click on ‘WordPresss / WooCommerce’.
- Take note of your ‘Clarity Project ID’ at the top of the page.
- On your WordPress website, install and activate the Microsoft Clarity plugin.
- From the settings of the plugin, paste in your Project ID from above and click ‘Save Changes’.
Team Member Access
Clarity makes it super simple to add more team members to your project, for times when you are part of a multiple-member team, you want to give access to a consultant, etc.
- From the ‘Team’ tab of your Microsoft Clarity dashboard, click ‘Add Team Member’.
- Enter the email address of the team member.
- Click ‘Add’.
At this point, the new team member will receive an invite email, and they will have access to the project by simply clicking on the link within the invite.
Note: Just as I covered with the initial setup, the new team member will need to log in with a Microsoft, Facebook, or Google Account.
By default, new team members will essentially be given read-only access, but you can easily make them an admin, using the role dropdown next to their account name.
The Clarity Dashboard gives you an overview of everything that’s going on with your website, as far as the data that Clarity collects, and looking at the screenshot below, you can see all of the available data points, but I’ve also listed those below.
- Total Distinct User Sessions
- Pages Per Session Average (i.e. How many posts/pages the visitor views during their visit to your website.)
- Scroll Depth Average (i.e. How far down the page the visitor goes.)
- Active Engagement
- Inactive Engagement (i.e. Visitor is sitting idle.)
- Dead Clicks (i.e. User clicked on something but nothing happened.)
- Rage Clicks (i.e. User rapidly clicked on the same or nearly the same items in a small space.)
- Excessive Scrolling (i.e. User scrolled a post/page not seemingly knowing where to go, possibly indicating a missing CTA.)
- Quick Backs (i.e. User quickly navigates back to the previous page, which could indicate they are not finding what they are looking for.)
- Popular Pages
- Referrers (i.e. Where are the visitors coming from before hitting your site.)
- Operating Systems
I cover heatmaps in the next section, but would quickly like to point out that you can easily view a heatmap for a particular item, by clicking on the heatmap icon next to it.
As with heatmaps (see the screenshot from the previous section), recordings can be easily viewed by clicking on the recordings icon next to an item.
Clarity tracks all visitor clicks and scrolls on mobile, desktop, and tablet, and automatically generates a heatmap.
Heatmaps give you a visual map of how visitors interact (clicks, scrolls, etc.) with your website content.
In the screenshot below, you’ll see an example engagement on a MyListing website, where the visitor interaction was to click on the Single Listing Quick Actions and then later click on the website logo to go back to the Home page.
On the left-hand side, we also see a nice ranking of the elements that received the most clicks.
Heatmap Click View
The default view of any heatmap in Clarity is Click view, which as the name eludes to, shows the visitor’s clicks on your website, and if you hover over an area that has some designated click activity, as shown in the screenshot, you’ll find some additional information.
Heatmap Scroll View
While viewing a heatmap, you can quickly toggle from Click view, over to Scroll view, using the buttons towards the top of the Clarity dashboard, and as seen in the screenshot below, 100% of the visitors scrolled to the bottom of this particular Single Listing on a MyListing website.
You can quickly see how valuable this type of information would be in regards to all areas of your website, as it allows you to see where to focus your most important content, find weaknesses in the user journey you’ve built, and so much more.
One of the great attractions of Clarity is that all sessions are recorded, including mouse movements, scrolling, and clicks of every visitor to the site, and this can be viewed and replayed at any time in the future, using the recordings feature.
I might do my own video showing this on a website, but until then, this video from Microsoft is a fun way to see how recordings work.
Clarity is purposely not trying to establish itself as the be-all-end-all analytics solution, and that is not a bad thing, because there are plenty of well-established solutions out there, that individually do an excellent job of offering what Clarity does.
Google Analytics, for example, has a massive foothold on web analytics, while HotJar has the heat mapping market cornered.
Microsoft Clarity provides both of those solutions in one platform, with performance and privacy in mind, and given the FREE price tag that Clarity has, it really is a no-brainer to implement it, as the payoff can be huge.