What Microsoft Clarity is and how to integrate it with Google Analytics 4

The other day I explained how to “see” a user's complete journey in GA4.

I put “see” in quotes because what you actually saw was a list of all the events and pages a user had viewed on your website. But you weren't seeing the navigation itself, that is, a recording of what that person had done.

But you can get that too, just not with GA4.

There are several alternatives, and in this article I'm going to tell you about one of the best: Microsoft Clarity.

Here I explain everything in a video:

And below you have it in text.

What is Microsoft Clarity?

It is Microsoft's user behavior analysis tool.

This means it helps you understand how users interact with your website, so you could say it's almost more of a UX tool than a digital analytics tool.

It's very good, easy to implement and use, and it's also free.

Basically, it has everything.

That said, it isn't a replacement for GA4 but a complement, because it provides features GA4 doesn't have.

What MS Clarity is for

Yes, I've just explained what Clarity is and what features it has, but what is it actually useful for?

It lets you see and review what users have done on your website.

And you can see it in aggregate, with heatmaps or one by one, with each user's session recording .

Features

As I said, the tool has the two main features already mentioned.

Let me explain each one a little more.

Heatmaps

They are representations of a specific page on the website that mainly show us:

• The elements users click most.
• The parts of the page that attract the most attention.
• The scroll depth (how far users go down).

I think it's obvious how useful this is for things like menus (which links get clicked most), whether there are non-clickable elements users think are clickable, or what generates interest (is it an image? Some copy? A specific product?).

Link clicks can be measured with GA4 without any problem, but for the other two you need a tool like this.

To view the heatmap, you just have to click the little flame icon on any of the elements:

You can also go to the corresponding section in the top menu and filter from there:

Session recording

The concept is similar to the GA4 User Explorer report I told you about the other day, except now you see the session itself, not a list of events:

By seeing how the user interacts with your page, you can tell directly whether they do what you want / expect or not.

And if they don't, speculate about why. And change your website, if appropriate.

Careful with session recordings: they're addictive. You watch a couple and suddenly you've spent half an hour there watching videos one after another like TikTok.

To view the recordings, you have the same two options as before:

• Click the camera-shaped icon on any element in the charts.
• Go to the corresponding section in the menu.

What's more, there's something very few tools let you do: see in real time what the user is doing on your website right now:

On the left, my current session on the website. On the right, what I'm doing (with a delay of about one second)

Brilliant.

Especially when IT spots something odd and you go and show it to them in real time XD.

Main use cases

Right, now you know what it can do, but when is it worth using and for what purpose?

In my opinion, there are several highly recommended use cases, and these are them.

Checkout

The jewel in the crown.

If you have an ecommerce site or sell some kind of service that requires fairly long forms (telecoms, banking…) I recommend doing two things:

1. Start watching the recordings of this page (including users on mobile and desktop devices). Analyze the main problems your users face. Suggest improvements.
2. Calculate checkout conversion rates (users who buy / users who enter) with a tool like GA4. This lets you check whether the proposed improvements are actually improvements.

Optionally, and a little more complex, you can send error events every time one occurs in a checkout field. This way you can quantify which fields aren't clear to your users.

Main landing pages / Sales pages

These pages are important for several reasons:

• Landing pages because they're a user's first contact with your website. If they don't work and your users bounce, any advertising investment you make is basically money thrown away.
• Sales pages because they're the ones that have to convince the user to take their card out for a walk. Or at least sign up.

Knowing this, in both cases I suggest two things again, but both in this tool:

1. Watch the recordings of these pages. Just like with the checkout.
2. Look at the Heatmaps: do users click where you expect? Do they focus where you want them to? If not, why? What can you change?

Observe, analyze, make changes and measure —bounce rate and conversion rates, for example—.

New features or major changes

When you implement a major change on the website, or launch something new, you have no idea how it's going to work.

Even less so if you haven't done user testing, which is usually the case.

So, after a few days, the best thing you can do —besides comparing the results with the objectives— is look at the heatmaps and user recordings for that new section. Especially if it isn't working as expected.

That way you can check things like:

• Whether traffic is arriving or not.
• Whether traffic arrives but doesn't do what you expect.
• Whether the user reads and scrolls.
• Possible errors.

In other words, you'll narrow down the reasons why things aren't working as you expected.

With Microsoft Clarity it's very easy to do this kind of analysis.

By the way, if you like what you're reading but still can't decide whether to implement it on your website, you should know you can try it without installing it here.

Pages with errors

You may already have some error tracking implemented in GA4. The most common are JavaScript errors or error events in forms.

Right, what you need to do is look in GA4 at which pages those errors occur on and whether they happen with a particular browser / device type.

Once you've done that, the next thing is to try to reproduce it yourself.

If you can't, you'll have to watch user recordings with that type of device or browser, to see what they do that makes the website fail.

Once you've found the error, the easy part comes next: fixing it. XD

Menus

Although you can create events to quantify clicks on each menu element in GA4, it's much faster to use a heatmap for this.

That way, at a glance, you'll see which sections generate the most interest among your users.

Great on any website and ideal for analyzing links to different categories in an ecommerce site.

Filters in ecommerce

And speaking of ecommerce, tracking filter usage in GA4 isn't that common. That's why a heatmap, while in many cases it won't tell you which options the user selected, will tell you which filters are used most.

Great when you have lots of filters and want to split them into two levels: the usual ones —at the first level— and the advanced ones —hidden behind a click on a link—.

Advantages of Microsoft Clarity

You now know what you can start measuring with the tool. What it can offer you and why I recommend you start as soon as possible.

But in case I still haven't convinced you, here's a summary of the advantages I consider most important:

• It's very easy to install and use. It's powerful. And it's free.
• It doesn't affect your website's performance.
• It gives you unlimited user recordings and heatmaps.
• There are no traffic limits, so it works for all kinds of projects.
• You can add it to unlimited projects.
• There is no data sampling. In other words, it shows you all your users' recordings and the heatmaps are based on unsampled data.
• It complies with GDPR and CCPA.
• You don't need to create maps for every page you want to track. It does it automatically.
• You can analyze two versions of the same web page by comparing their two heatmaps side by side.
• You can apply filters to session recordings (countries, pages…). So you can narrow down what you want to see.
• You can also integrate Microsoft Clarity with GA4. Once you do, you can see GA4 data in Clarity. I'll explain how in a moment.
• Lastly, and although I use it less than I should, you should know that you can ask Microsoft's AI questions about Clarity data, and it will try to answer you and draw the right conclusions. That means you don't have to watch every session, which I see as both good (it saves time) and bad (you'll miss details):

How to implement Microsoft Clarity on your website

To start using the tool, you only have to do two things.

Step 1. Create an account

The first thing is to create an account here:

https://clarity.microsoft.com

You can create it directly with your Google or Microsoft account.

Step 2. Add the code to your website

You have three alternatives, all fairly simple.

#1. Direct integration with certain (many) CMSs:

You know, the typical plugin you install in WordPress (for example), and all you have to do is enter your account ID and you're done.

Easy, but there's a problem: you can't easily control the cookies and you may drop one on the user before they accept the banner.

Yes, it can be done, by disabling cookies in the tool settings and adding JavaScript, but it isn't easy for everyone.

#2. Using GTM

That's why I prefer this second option, so you can control when cookies are set, for example via Consent Mode.

And of course, Google Tag Manager has a template for it:

Sure, there are actually a few more templates, but the one I show above is the official Microsoft one.

If you don't like using templates, you can also create an HTML-type tag and paste in the code from before.

#3. Add the code manually

Either by editing your website files directly or by using some feature of the CMS theme or a plugin that lets you add it.

Personally, it's the option I like least. But it's an option.

Next steps

Once you've installed the tool on your website in any of the three ways, Clarity will start collecting data from your entire site, unless you've deliberately done something else (such as selecting only certain pages in GTM).

And you can start watching your users' sessions and heatmaps.

It couldn't be easier.

Alternatives to Clarity

Right, once you know the tool, what it offers and how to implement it, you may still dislike it for some reason.

If that's the case, here are the three I've used most in different projects.

Hotjar

Very good, with a pretty decent free plan. But of course, nowhere near as unlimited as Clarity. That's why it's now my second choice.

That said, it offers extra features such as the ability to ask users for feedback through a small form embedded in the website.

Yandex Metrica

The Russian version of Google offered a digital analytics platform almost as powerful as its American rival. Besides features similar to Google Analytics, its free version offered recordings and heatmaps.

It wasn't unusual to find websites using this tool alongside Google's.

But the technology they used ended up counting against them, with more and more projects where it couldn't be implemented or was difficult, so it gradually fell into decline.

CrazyEgg

The first one I used, so I have a soft spot for it.

Back then it was very top-tier because its plan was quite affordable. It focuses on heatmaps and, as of January 2024, doesn't offer recordings.

Besides these three, there are plenty more alternatives. Expensive and cheap, with more and fewer features. So if you don't like what Microsoft Clarity offers (really?), have a poke around the web.

Bonus: how to use Microsoft Clarity with Google Analytics 4

It isn't something that's advertised much, so you may not know it, but Clarity and GA4 can be linked.

How to link Microsoft Clarity with GA4

To do that —assuming you already have GA4 implemented on your website— you need to log in to your Clarity account and go to Settings > Settings and click the Get started button:

It will ask you to sign in to the Google account you use to access GA4:

Grant the necessary permissions:

And finally, select the GA4 property you want to link it to:

Once that's done, both accounts will be linked:

And you'll be able to see GA4 data inside Clarity:

But there's one final touch: we're going to create a custom dimension in GA4 like this (if Clarity hasn't created it automatically, which it sometimes does):

The important thing is that its scope is event and the parameter “claritydimension”. You can give the dimension whatever name you prefer.

Advantages of linking GA4 and Clarity

Right, once you've linked them, you'll want to know what the benefits are.

Besides the one I just mentioned —seeing GA4 data in Clarity and being able to filter the user segments you want to analyze more easily; just click any element in the charts and the option to view the corresponding heatmap or recordings appears below— I think the bigger advantage is the reverse: see Clarity data in GA4.

That's why we created the custom dimension in GA4.

You can use this dimension in standard reports or Explorations:

What it shows you is the Clarity URL containing the corresponding Analytics user segment.

This means you'll be able to view the complete journey of the user you're interested in on the website:

• The one who placed a huge order.
• Or the other one who said something wasn't working.

Not bad, right?

Important, to see the URLs you'll have to sort the table by this dimension:

Another small drawback is that the URL isn't a link, so you'll have to copy and paste it yourself into a browser tab. This wouldn't be hard for Google to fix, although I'm not sure they're interested in doing so…

Final conclusions

That's everything I wanted to say about Microsoft Clarity.

In these more than 2500 words, I've focused on the main things I wanted you to know: what Clarity is, its advantages, the key use cases and the ways to implement it in your project.

I haven't included some more advanced options because, frankly, I don't think it's necessary. What I've explained gives you more than enough to play with it for quite a while.

Because I assume you've already implemented it, right?

If not, you're already taking too long.

It's useful, free and powerful. Can you ask for more?