How To

Add free behavioural analytics using Tag Manager & Microsoft Clarity

Add free behavioural analytics using Tag Manager & Microsoft Clarity
February 23, 2024

  · 3 min

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.

New Microsoft Clarity Project
New Microsoft Clarity Project

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

Microsoft Clarity New Project Details Form
Microsoft Clarity New Project Details Form

Now connect to you Google Analytics for more accurate insights.

Microsoft Clarity Connect to Google Analytics
Microsoft Clarity Connect to Google Analytics

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

Sign into Google Analytics from Microsoft Clarity
Sign into Google Analytics from Microsoft Clarity

Give Clarity access.

Google Analytics Microsoft Clarity Sharing Permissions
Google Analytics Microsoft Clarity Sharing Permissions

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.

Microsoft Clarity Tracking Code Snippet
Microsoft Clarity Tracking Code Snippet

Head to Tag Manager and create a New Tag.

Google Tag Manager Tags
Google Tag Manager Tags

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

Microsoft Clarity Tag Manager Tag Setup
Microsoft Clarity Tag Manager Tag Setup

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
Microsoft Clarity Dashboard

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

Share

All Posts

Gradient Background