June 19, 2022

How to Use Microsoft Clarity, Free Heatmap Tool, to Track Users On Your Website


In today’s video, I’m talking about a really cool heatmap and session tool for your websites so you can track your progress, make informed decisions, and create killer websites that convert.

Now, I’m using a free tool called Microsoft Clarity. I’m still surprised that this is free: it’s GDPR & CCPA ready, Clarity is a free, easy-to-use tool to capture how people interact on your site. It’s kind of insane that this is free, because this could easily be a paid tool.

So what Clarity will do is it will show you the specific elements on your website. It’ll create heat maps on where people are visiting the biggest parts of your website. It’ll also provide sessions so you’ll be able to see live sessions of people interacting on your website.

I’m just gonna show you all what this looks like in real time. Then I will provide you with training on this so you can set this up for your websites, so you can make informed decisions.

I’m gonna do my personal website–I’m gonna go ahead and log in. So here I am in the session, I’m just looking at this, I can quickly see the interactions with Google Analytics as well–which I’ll save for another video. But ultimately, you can see in real time what those sessions look like.


First thing is your dashboard, you’ll be able to see page procession, scroll depth–meaning how far folks go down the page, and so forth, most of this is available in Google Analytics. What I really wanna show you is Recordings. You can actually rewatch recordings of people interacting on your website.

For example, this person spent 3 minutes and 36 seconds on the website. Now I can see how they interacted, right? So now, I’m looking at how they performed and made informed decisions on what they wanted to see on the website.

As you can see, they clicked this course–you can actually speed this up as well, and I’m gonna do 4x, so this goes quickly. You can see that they’re looking at the different offers that I have on my courses, they’re reading testimonials, they’re clicking through and making interactions on this page.

So if I see that they’re spending a lot of time on a specific page–or maybe if they’re having a problem with a specific thing on a page–I can use that to make updates on my site. It’s just an amazingly cool, free tool that you can use to get the job done.

So as a web designer or even an agency owner, now I can use this tool to say, “Okay, if I see people are spending more time in this specific area or page, now I can use that to decide. Okay, so maybe I need to focus on this section, change the color of the buttons, or make it more interactive so I can convert more people.”

Heat Map

Another great part of this tool is the heat map section. So I can click this and this, and it’ll show me a live version of that heat map. As you can see, I made the accelerator–my course–a strong component of that.

You can see that’s where a lot of clicks are happening, so as I scroll down, I can also see my portfolio of companies. You see how this has three clicks, but this is not clickable. So what this tells me is, “Okay, I need to make this section clickable, maybe it should go to another section, maybe it has some sort of action that causes interaction for folks.”

So seven clicks or one click here in regards to “Work with Me,” “Join accelerator” is here and it’s here as well, so maybe I can get rid of this second section and just have the “Work with Me.” You can also add the Google Analytics and it’ll integrate with that, so you can see that live in Clarity as well.

Man, this tool is really cool–I still can’t believe it’s free, honestly. And this is not a paid advertisement, I just stumbled upon Clarity about a year ago and just really love the tool.

Free Training for Google Analytics and Microsoft Clarity

So one last thing I wanna show you all is something in our knowledgebase. I’m gonna go in here and show you the new training that we’ve added. So we’ve added an analytics setup, and I’ll share this with you, you can grab this in the description.

Basically, this is teaching our team internally how to add Google Analytics as well as Microsoft Clarity to a website, I’ll be providing that so you can do that for your website. This is for Webflow, so if you’re using Webflow this will be perfect for you. If not, it’s pretty much the same components that you would need.

Basically, to set this up on the site, you just sign into the account, you add a new project, you copy your tracking code, take that tracking code and add it to the header on your site, hit Publish, and now you can track heat maps and recordings in real time.

The tool is pretty awesome, so you can grab this below and I just wanted to provide a quick so y’all can get a recap of this. Because I just had to share how well we’ve been using this tool to make decisions on updates for our websites. And it’s just another value add for your clients or as a business owner in general, this is going to help you make decisions on what you can do with your websites.

Thank you all for checking out the video. You can grab the SOP below–it’s a Notion doc, so check that out as well. If you like the content, please Subscribe, Like, drop me a Comment below with any questions you have, and I will see you all next week.

A web designer on laptop waving at computer

Ready to work together?

Let’s link up.  Complete our quick form below to schedule a 30 minute consult with our team.  We invite startups and businesses looking to collaborate to build their website with 5Four.  
Schedule A Consult