See your apps through the eyes of your users with this free tool from Microsoft
Introduction
Monitoring modern web and mobile apps to drive engagement and optimize performance can be a complex task. It often requires a blend of front-end session-tracking (ex: Google Analytics) and back-end observability (ex: Application Insights) tools to make things work. But if you’ve ever stared at a Google Analytics dashboard wondering why users are bouncing or where they’re getting stuck, Microsoft Clarity might be the missing piece.
In this post, we will walk through the key features of Microsoft Clarity and how you can get up and running with it in minutes.
What Does Microsoft Clarity Do?
Clarity is Microsoft’s free behavioral analytics tool designed to help website and mobile app owners understand how users interact with your website via detailed session recordings and user experience performance insights.
Its key features include:
- Heatmaps: Click, scroll, and hover data that reveals areas with high engagement and user attention.
- Session Recordings: Watch playback of user sessions to see how they actually use your apps, and where pain points like rage clicks can impact experience.
- Performance Metrics: Clarity offers statistics in page load performance critical to UX, including the time to load primary content and the delay between user interaction and app response.
- Campaign Metrics: Clarity integrates with tools like Google Analytics, Google Ads, and Shopify to measure the performance of advertising and sales campaigns, and correlate how sites turn browsers into buyers.
Clarity empowers digital marketers, UX designers, product managers, and developers to make data-driven decisions that improve engagement and conversion rates, all without impacting site performance.
My Initial Experience with Clarity
Shortly before writing this post, I took some time to finally clean up my blog website, blog.miguelarcilla.com, and installed Clarity. I did this before advertising my MLP because I was interested to see how a “campaign” like this would be tracked.
Installation
Setting up Clarity couldn’t be simpler; the quickest way is to add a <script> to the <head> of your website, and replacing YOUR_CODE_HERE with an appropriate tracking code:
<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_CODE_HERE");
</script>
If you work with platforms like Wordpress, SharePoint, or SquareSpace, Clarity has that covered too, and provides steps for multiple platforms.
And for developers using AI coding assistants, Clarity even provides a default prompt you can insert to ensure your AI-constructed websites have the right tracking in place!
add Microsoft Clarity with project id as **YOUR_CODE_HERE**
Insights
Shortly after Clarity has been configured, the project dashboard begins populating live data. In this case, I was able to watch user session recordings, identifying how people were reading my posts, clicking through pages, and identifying dead links that resulted in backtracking.
If your websites work with personal data for signed-in users, you’ll want to take advantage of Content Masking features to ensure sensitive data is not stored by the platform. Input data and other patterns are masked by default, but you can configure specific elements and levels of strictness to suit your needs.
Advanced Features
As you familiarize yourself with Clarity, you’ll want to capture more and more advanced activities, like custom events, campaign performance, and feature rollouts. With features like labels, ad campaign insights, and A/B testing with AB Tasty, there is so much more to customize and explore.
Of course, as with many Microsoft platforms, Clarity comes with a Copilot to help you through everything, from summarizing session insights in plain text to asking questions about your data, making behavioral analytics more accessible to all.
Conclusion
Microsoft Clarity is one of Microsoft’s underrated and underappreciated free tools, helping people build better, friendlier websites through data and AI.
You can sign up for a free account and get started in minutes at the Microsoft Clarity website, and check out their live demo featuring actual user traffic to the same website here!
Thanks for reading, and Happy Building!
