Want to know exactly how users behave on your website? Where they click, how far they scroll, or what confuses them? Microsoft Clarity is a powerful, free tool that gives you visual insights like heatmaps and session recordings— helping you improve your site’s user experience.
In this blog post, we’ll walk you through the easy steps to install Microsoft Clarity on your website, complete with guiding images to help you every step of the way.
🔧 Step 1: Sign Up for Microsoft Clarity
- Go to https://clarity.microsoft.com
- Click “Get Started” and sign in using your Microsoft, Google, or Facebook account.
📝 Step 2: Create a New Project
- Once logged in, click “Add New Project.”
- Enter your website name and domain (e.g., www.yoursite.com).
- Choose your website category (optional), then click “Add.”
🔑 Step 3: Copy the Tracking Code
After creating your project, you’ll be taken to a page with your Clarity tracking code.
- Copy the script provided. It looks something like this:
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "YOUR_PROJECT_ID");
</script>🧩 Step 4: Add the Code to Your Website
Option A: Directly in Your HTML
Paste the code just before the closing </head> tag on every page you want to track.
Example:
<head>
<!-- Other metadata and CSS -->
<script>...Clarity Script...</script>
</head>Option B: Use Google Tag Manager (Recommended)
- Log in to your Google Tag Manager account.
- Click “Add a new tag.”
- Choose “Custom HTML” and paste the Clarity code inside.
- Set the trigger to All Pages, then Save and Publish.
If you have Google Tag Manager installed then you can also directly go setup and connect your tag.
Step 5: Verify Installation
After publishing the changes:
- Visit your site and browse a few pages.
- Return to your Clarity dashboard. In a few minutes, you should start seeing session recordings and heatmaps appear.
Bonus Tips
- Clarity does not slow down your site.
- It automatically filters out sensitive data.
- You can combine Clarity with tools like Google Analytics for deeper insights.
🚀 Start Improving UX with Clarity Today
Microsoft Clarity is one of the easiest ways to get instant, visual feedback on your website’s usability. Whether you’re trying to reduce bounce rates or improve conversions, Clarity gives you the insights you need—for free.
Need help installing Clarity or analyzing the data? Contact the Tikitech team and we’ll guide you through it!
