Improve Your Website Conversions With Microsoft Clarity

Note: This post is from August 21, 2021 but the information is still relevant.

Whenever I do an audit for a client, I always perform a technical analysis on their website. There is no substitute for qualitative analysis, but you can get some good insights by looking at client websites (or your own if you are looking to improve conversions on your site).

What is Microsoft Clarity?

Microsoft Clarity is a tool that lets you see what your visitors are doing on your website.

In other words - it's an analytics tool with heatmaps and session recording.

What can you do with Microsoft Clarity?

Unlike other complicated analytics solutions (cough GA cough), Clarity is much more simple. With Clarity, you have 3 main functions:

Dashboard - this is where you get a broad view of what people are doing on your site, with things like:
Session counts
Pages per session
Scroll depth - how far did people scroll on average on your pages
Engagement - time spend being active vs. inactive
Dead clicks - places people clicked that are not technically clickable.
Rage clicks - repeat clicks in the same area
Excessive scrolling - tells you if someone can't find something on your site
See your most popular page
Catch javascript errors
See where your visitors are coming from
See which browser they use
Recordings - Watch to see how your visitors are navigating your website. The insights from this function will vary, but occasionally you can spot opportunities and problem areas.
Heatmaps and Clickmaps - Check to see how far people scroll and where they click the most.

Now that you have a broad overview, let's install it step by step and explore ways to glean insights from your visitors!

How to Install Microsoft Clarity

Once you select your preferred method of registration, you'll be prompted with an "Add new project" modal that will guide you with setting up your new project.

Side note: this is actually a clever onboarding strategy. Instead of dropping us directly into the dashboard, Microsoft allows us to see the benefit of the product by getting started ASAP.

Name it anything you like. For example, I use "SaaS Blocks" for one of my websites.
Enter your website URL
Select a category - this doesn't really matter much.

Step 1: Install the tracking code.

Paste this code into the <head> of every page (or a global header if you have one). Note that it will not work in the footer (I've tried).

Note: There is no save button. You just save the code on your end and continue with connecting Google Analytics.

You can set up your Masking settings, or skip them for now. Personally I would skip them until you are all set and see what Maskings mean.

Step 2: Connect Google Analytics

1. Click on "Get Started"

2. Select your Google Account

3. Accept the permissions asked by Microsoft Clarity.

4. Choose a website for the newly connected account. Note: you may need to create it in Google Analytics first if you don't already have an account.

5. Once you select the website (or add it manually if you don't see it in the list), you will get a confirmation screen. You are now done! There is nothing else to do.

Note: You will not be able to browse around Clarity until their servers locate the script. This may take up to 2 hours, but for me it was about 15 minutes. Once the settings take hold, you'll finally be able to see your Dashboard!

Despite having completed the setup, you'll continue seeing this screen with a button to "Let's get started". In my opinion, this is bad UX because it makes it seem like you haven't set everything up yet, but hey... I don't work at Microsoft. Notice the tiny "It may take up to two hours". Instead they should have said "PLEASE WAIT UP TO 2 HOURS" {Check my configuration}

Optional: Masking

By default, Clarity enables a "balanced" mode to hide some of the sensitive information in your recordings. You can leave it at that, or enable the "Relaxed" mode. Personally, I noticed that the Balanced mode hid my testimonials when I wanted to see which testimonial people are paying the most attention to.

Optional but recommended: IP blocking

IP blocking allows you to block IPs that may give you inaccurate data. For example, if you are in an office, you may want to block your local IP so that your team members browsing your site are not inflating your data or making you spend time watching their own browsing behavior.

If you are a solo founder, you should definitely add your own IP to the list so your browsing behavior is excluded from the data set.

Alright, now that the boring setup is over, let's see what kinds of insights we can dig up!

Uncover insights with Microsoft Clarity

I'd love to tell what you should do, but if I may be 100% honest here, I think you are better off exploring the platform on your own. There's a certain element of magic in uncovering new "aha" moments for the first time and I don't want to ruin it for you.

That being said, I'll share some things I have personally found useful. So... if you'd like to do it yourself, go ahead and stop reading!

Ok. Still here? Ugh, ok, let's take a look then!

Browse heatmaps to see how far people are scrolling on your page.

The heatmaps section is my favorite area. It gives you a good idea how far people are scrolling on your page. If your pages are long and people are not seeing important information you'd like them to see, it may be time to shorten those pages!

On this fairly new account for my own product, I have discovered that only a third of the visitors saw the testimonials on my page.

I hypothesized that showing 1 or 2 testimonials in the hero section instead of bunching them all in one place might actually get people more interested in the product.

My test will be to move a few testimonials to the top of the page to see if it improves the scroll duration.

Check out the click map to see what people are clicking the most

The click tab may also give you some insights as to what people are clicking. For example, on my personal website, I have discovered that people are clicking the large image sections (probably looking to open a larger preview):

Combined with another insight from talking to my customers, I learned that many people want to preview individual sections in full detail before ever committing to buying.

I also learned that people are looking at the "layouts" tab quite often. I hypothesized that depending on your SaaS, you probably want to see if there is a pre-made layout that saves you time, or looks as similar as possible to what you need.

Knowing this, I can create a variety of layouts for different types of SaaS companies and use them as landing pages for SEO and to increase conversion.

For example, I could create pages for:

Mobile apps
Dev tools
SEO tools
Desktop apps
Chrome extensions (that integrate with your SaaS)
Social media apps

Each page would then act as a keyword, for example: "mobile app tailwind template" or "mobile app business template". I don't know the exact keywords yet, but this is just a guess.

What would convert better — a generic page, or a page that speaks directly to my business? I think the answer is obvious.

Spy on people with recordings

I am a bit uneasy with this feature as it takes away users' privacy, but it is kind of fun and at times super helpful.

What can you do with recordings? A bunch of stuff if you have the time. You can:

Check for UX issues (is the user struggling to do something?)
Check why some pages may not be converting as much as others (by looking at your Google Analytics to identify low-converting pages, then referencing Clarity to see what might be happening on those pages).
Check to see if there is any common behavior between pages that convert the best. To do this: identify your best performing pages, then check Clarity to see if there is a shared user journey (a page they visit) that tends to result in higher conversions.

Note: Before spending hours watching recordings, I recommend having a clear goal in mind and referencing Google Analytics to see what kinds of insights you are trying to uncover.

Are you looking for UX issues? CRO issues? It helps to know what you're trying to figure out before looking at the data.

These are the most useful features in my mind. You can also use filters to distill the data into segments. For example, you can identify visitors who came from a specific source and then see how they converted (or not converted). This may help you gain additional insights about your visitors.

Personally, I stick to the visual aspects of Clarity and less so the filtering. In any case, it's a great piece of software that is absolutely free and a must for anyone looking to better understand how people interact with their website!