How To

Add free behavioural analytics using Tag Manager & Microsoft Clarity

Underline squiggle
Add free behavioural analytics using Tag Manager & Microsoft Clarity
May 21, 2021

  · 3 min

February 24, 2023

So there are a ton of tools out there for behavioural analytics we get asked about Horjar the most, but in this how-to, we're going to show you how to set up some great heatmaps and user recordings for free and very quickly using Google Tag Manager and Microsoft Clarity.

Okay, let's kick things off by saying that to follow along you have to have Google Tag Manager installed and a Microsoft Clarity account. If you don't have Tag Manager you can check out this post of how to install Tag Manager on Webflow, our platform of choice. Milk Moon Studio is a Webflow studio first and Webflow designers like things low-code and clean, so even if you're a Webflow expert but don't use it, try Tag Manager, it'll keep you project nice and clean with only the Tag Manager script in your <head> making script management very easy.

To make things nice and fast on your site we'd also suggest using our deferred tag how-to on the Microsoft Clarity Tag we're going to be creating in Tag Manager.

As an aside, if you want to get really technical Hotjar is a great solution for the problem we're trying to solve, you can view recording around certain flows and conversion events etc which will require a teensy bit of coding (not to mention things like quick surveys etc.), but for folks who just need to see what their users are doing and view some pain points on your site, Clarity is great and free. You get all the usual heat maps and recordings at no cost and it's super easy to surface issues like dead clicks and rage clicking. It even links with your Google Analytics UA account to give more accurate data. For help on setting up UA in Tag Manager check out this post.

Step 1 - Create a Microsoft Clarity Project

Once you signed up for Clarity, head to My Project and hit add new project.

Microsoft Clarity project Setup

Give your project a name, stick in your URL and select a category, then hit Create.

Clarity Setup

Now connect to you Google Analytics for more accurate insights.

Clarity Code

Hit Get Started and then select your Google Account you use for GA.

Clarity Link Google Analytics

Give Clarity access.

Clarity Google Analytics Linking

Now select the Analytics account you want to link to. At this stage Microsoft Clarity only support Google Analytics UA accounts and not GA4. You can find help on setting that up and adding it to Tag Manager in this post.

Step 2 - Install the Tag

Copy the code snippet.

Clarity Embed Code

Head to Tag Manager and create a New Tag.

Tag Manager Clarity Tag

Now, give the Tag a name, select Custom HTML as the Tag type and paste in the snippet.

Tag Manager  Clarity Embed Code

For the Trigger you can just select All Pages, but we're going to use our Fully Loaded Trigger. This is the delayed trigger we set up in this post. You're perfectly fine with the All Pages tigger, the delayed Trigger  just gives everything on the page time to load first for slightly better PageSpeed experience, making Google a teensy bit happier.

Now Submit and Publish and you're done. Results will show in few hours and you should have something like this:

Microsoft Clarity Dashboard

Questions about setting up behavioural analytics? Hit us up in the comment and you can always find more how-tos here.

Video Transcript

Plus sign icon
Gradient Background

Web Design Rebels Unite. Join Our Newsletter.

Unlock web design innovations, exclusive insights and stand out with our newsletter.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.