How To Properly Install Microsoft Clarity w/ and w/o Google Tag Manager

Appealing to all masses, Microsoft Clarity was masterminded as a free behavioral analysis tool, aiming to predominantly assist website owners to comprehend the gap between what they hope or want users to do on their site, versus what they actually do.

The primary idea behind it is that by understanding user expectations against real actions, websites can optimize & adapt their content, navigation, widgets, other front end elements, etc., to solve for the issues their site visitors face.

To get started with Clarity, the first step is installing its code on your website. In this post, I will discuss how to do so with Google Tag Manager (including verifying the installation), and without.

How To Install Microsoft Clarity With Google Tag Manager (GTM)

Without feeling too handicapped or dependent on your Development team, you can use GTM to easily install third-party scripts, Microsoft Clarity included. Additionally, you get the benefit of its asynchronous loading.

To add the Clarity tracking via GTM, follow the steps along.

Step 1: Create a New Custom HTML Tag

Hit the “New” button under the tags section to initiate the creation of a new tag.

Then, for Tag Configuration, you’d choose the “Custom HTML” option.

Step 2: Copy & Paste Your Microsoft Clarity Code

Once you’ve selected the “Custom HMTL” tag, you’ll get a big text field area to input HTML code. In that window/area, copy & paste your Clarity tracking code verbatim. After, hit the “save” button on the top right corner (not shown in the screenshot below).

Step 3: Determine Your Triggering for Your Newly Created Tag

As your final step, you’d have to designate a trigger to make your Clarity tag fire. GTM tags are typically connected to events such as when a video is played, when a click occurs, when a page loads, etc.

Triggers work as an intermediary between tags and events, and dictate when tags need to be fired, or in a different set of situations, when not to.

In any case, coming back to the point, if your goal is to use Clarity on all pages of your site, you would need to opt for the “All Pages” Page View type trigger. See the screenshot below for visual reference.

Lastly, save again, and you’re all done with creating the necessary GTM tag & trigger setup for Microsoft Clarity.

Next, comes verification — before you decide to “Submit” your GTM changes to your live website.

How To Verify if Your GTM Microsoft Clarity Tag Will Fire Correctly

To verify, we would be leveraging Google Tag Manager Preview Mode. Follow along to learn how.

Step 1: Enable Preview mode by clicking on it from your GTM Workspace

Step 2: Succeeding step 1, go to any page on your site, or just the homepage (since you allowed Clarity to be fired on all pages), and select it from the left window pane of the Tag Assistant debugger tab.

Step 3: Then, under the tags fired, you’re looking for your Clarity tag to say that it was fired 1 time. You can keep testing the same on multiple pages, but be sure to select the relevant page every time, and not the summary.

See the screenshot below, that covers both the step 2 and 3.

Publishing GTM Changes on the Live Site, in Order To Begin Clarity Tracking

If you’re satisfied with your QA & verifications, exit the debug mode. At that point, the only remaining step is to publish all your changes to your site.

To execute, go back to your workspace, and elect to click on the “submit” button.

Subsequently:

• Add a version name
• Its description
• And eventually, publish all of the new updates in GTM to your site

Thereupon, your site will begin tracking with Microsoft Clarity via Google Tag Manager (GTM).

To know if everything was implemented accurately, you should start seeing data inside Microsoft Clarity after some-time. Best to wait out a day; however, Microsoft says that you should start seeing data in 30 minutes. In fact, you can even test your live site using Chrome Developer tools, to see if the Clarity script is firing.

How To Test if the Microsoft Clarity Script Is Firing Rightly on Live Website — Using Chrome Developer Tools

Step 1: Go to any page on your site, and invoke the inspect element feature by performing a right-click.

Step 2: When you inspect element, a whole new Window Pane will open. At that point, go to the “network” tab.

Step 3: If you don’t see any data, keep the inspect element window open, and refresh your page. As soon as your page starts to load, you will see a bunch of data being populated.

To filter out from the non-essential info, click on JS. (see image below for reference).

Step 4: As your concluding step, under the name column, find “clarity.js.” Once you find it, click on it. Doing so will load up the header column data for that script. In there, you’re looking for:

• A request made to a https://www.clarity.ms URL
• Status Code of 200 — with a green dot

If, during your QA, you’re hitting all the checkboxes, then it’s an indication of your Clarity script being fired on your live site.

How To Install Microsoft Clarity Without Google Tag Manager

If Google Tag Manager is not your preferred solution, and you’d rather go old school (nothing wrong with that), all you have to do is copy & paste your Clarity tracking code within the <head></head> section of your website.

Clarity refers to it as a manual installation, but it’s the same thing.

What About WordPress Users?

WordPress users can go directly to their header.php file, and paste the code anywhere before the ending </head>.

To see if Clarity is added validly, you can use the two above described verification methods.

Summary

To make sense of your site’s user journey with Microsoft Clarity, you need to start with installing its tracking code. As read, doing so isn’t rocket science.

And whether you fall into the group of people wanting to take advantage of Google Tag Manager or prefer a manual method, this post discusses both approaches to get cracking with Clarity.