Categories
CRO and UX

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.

creating a new custom html tag in gtm
As your very first step, choose to create a new custom HTML tag. And don’t forget to title it.

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).

Copy & paste your Clarity tracking code in this empty HTML area. Afterwards, save your tag.

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.

choosing all pages trigger in gtm
Go with the All Pages Trigger, if your goal is to plug-in your Clarity tracking code on your entire website.

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

enabling preview mode from gtm
As your first step, enable preview mode.

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.

debugging in gtm to see whether the microsoft clarity tag was setup correctly
How to QA if you’ve correctly installed the Microsoft Clarity tracking code via GTM.

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.

As displayed in this image, 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
publishing gtm changes to the live environment
As demonstrated, add a version name, its description, and “publish.”

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.

selecting the network tab in inspect element
Navigate to the network tab after inspect-ing element.

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).

filtering to JS in chrome network tab
Filter out your information by narrowing your options to JS.

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
verifying if Clarity script is firing correctly on live website
Verifying if Clarity script is firing correctly on live website, with Chrome Developer Tools.

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>.

how can wp users add microsoft clarity, manually
How WP users can add Microsoft Clarity Tracking code.

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

You May Also Want to Check Out:

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.