How to integrate Microsoft Clarity on your Website
John / Updated on 04 Nov 2023
Microsoft Clarity is a free and easy-to-use tool for website traffic and behavioral analysis.
It captures how real people actually use and interact with a website and the data is analyzed and ready to view in near real-time. This helps website managers better understand user interaction and behavior on the website and improve their sites' user experiences.
Microsoft Clarity is very easy to set up on your website and start gathering data within minutes after setup.
It is used by big brands such as Hewlett Packard(HP), Forbes, IKEA, World Health Organization (WHO), and Pizza Hut among many others.
Microsoft Clarity Features
Clarity provides a wide array of important data about your website such as:
- Session recordings - Clarity captures videos of how website visitors are interacting with your website and allows you to view them via your Clarity account. You can literally view them scrolling and reading through your website content and can see how your website pages look across multiple devices and browsers with real users. You are able to see where they get frustrated and where they leave your web pages. This helps you to find out what's working, learn what needs to be fixed, and test out new ideas.
- Website heatmaps - Clarity allows you to view how far visitors scroll on your web pages, where they click, and what they ignore.
- Traffic sources - Clarity allows you to view from where your site visitors landed on your website (eg. from Google, Bing, Facebook, etc).
- Visited pages - It allows you to see each page that gets visited. With this information, you can learn which pages are performing better and improve on the others in that line.
- Visit duration - Clarity allows you to find out how long each visitor takes on each page of your website. It shows you the time they entered and the time they exited the page. It as well allows you to see the average time on site for all visitors, and the amount of time they were active on your web pages.
- Device, operating system, and browser used - With Clarity, you are able to view what kind of devices visitors are viewing your website on such as PC, tablet, or mobile phone. You are also able to see their operating systems (e.g. Windows, Linux, Mac, Android, etc) and the browsers they are using (e.g. Google Chrome, Firefox, Safari, etc).
- Visitors' countries - Clarity allows you to see which countries each of the website visitors are coming from.
- The number of unique visitors - With Clarity, you can view how many unique visitors your website received over a given period. You can also see all the sessions and the average number of pages visited per session.
You can add as many websites to your Microsoft Clarity account as you would wish. It is a completely free forever service with no paid version.
How to integrate and setup Microsoft Clarity on your website
Clarity is very easy to install and use on your website. Follow the steps below for setup.
Step 1: Visit the Clarity home page via https://clarity.microsoft.com/, then click on the Signup button at the top-right corner.
Step 2: Select to sign up with either a Microsoft account, Facebook, or Google account.
In my case I chose Google, so I was redirected to Google accounts to choose either of one my already logged-in Gmail accounts or to use another Google account.
Step 3: Add a new project. You will be presented with a prompt to agree to Clarity's terms and conditions. Upon agreeing, you will be presented with a form to key in your website details under the "Website" tab as shown below.
Enter the website name, and website URL, and then click on the "Add new project" button.
Step 4: Installing of Clarity tracking code. You will be presented with the option to choose the installation method.
Manual Installation
For manual installation, click on the "Get tracking code" button under the "Install manually" option. Copy the code and paste it inside the head section (<head>) of your website pages that you wish to track.
If you use PHP, simply create a file and name it something like "clarityanalytics.php", paste the Clarity tracking code in it, and then include it inside all your pages <head> section using include() or include_once() PHP functions.
You are now set and the installation is complete.
Installation on third-party platforms
Alternatively, if your website is built on WordPress CMS or other third-party platforms (e.g. Joomla, Wix, Shopify, Squarespace, etc) click on the "View all platforms" under the "Install on a third-party platform" option. You will view all the supported third-party platforms.
Select the respective platform that your website is built in and follow the easy step-by-step installation process given under it.
After the installation is complete, you won't start seeing the results/analytics immediately.
Give it several hours and come check again. If your website has received traffic, then you will be able to see the statistics.
Once Clarity has captured some data, you will be able to view it in the form of number summaries and different types of charts comprising all the statistics that I mentioned at the beginning, which is easy to read and interpret.
Microsoft Clarity has four tabs at the top:
Dashboard tab - This tab comprises various charts as shown above.
Recordings tab - Comprises all the video recordings for the website users over the selected period of time. On each of these recordings (found on the left side of the page), you can see the entry and exit URLs, entry and exit time, session duration, number of pages visited, number of clicks made, the type of device used, the operating system of the user's device and the country in which the user comes from.
You can click anywhere on the recording details and the video will be played on the right side section.
Heatmaps tab - This allows you to see how users are scrolling and clicking on elements on your website.
Settings tab - Through this tab, you can make various changes to the project's settings or delete it entirely.
If you integrate Microsoft Clarity with Google Analytics, you will have an extra tab named "Google Analytics" like in my case above.
That's it! You can now integrate and use Clarity on your website.