Add Microsoft Clarity to Joomla

Your analytics tell you that a page has a high bounce rate, but never why people leave. Is the button hidden, the form confusing, or the layout broken on mobile? Microsoft Clarity shows you, for free, with session recordings, heatmaps and rage-click reports. You can add Microsoft Clarity to Joomla with one HTML snippet in Code Snippets.

Get your tracking code

You need a Microsoft account and a Clarity project.

1. Go to Microsoft Clarity and sign in.
2. Click New project, and enter your site's name and address.
3. Open the project and go to Settings → Setup.

4. Under Install manually, click Get tracking code.

   

5. Click Copy to clipboard. Your Project ID is the short string at the end of the code.

   

The snippet code

The tracking code looks like this, with your Project ID in place of YOUR_PROJECT_ID:

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

In the Site Header location it lands in the <head> of every page.

How to add this snippet

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Microsoft Clarity.
6. Set Code Type to HTML.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to Site Header.
9. Paste your Clarity tracking code into the editor.
10. Click Save & Close.

Check that it works

1. Open your site in a normal browser window with no ad blocker, and click around a few pages.
2. In Clarity, open the Recordings tab.

Your visit shows up within a few minutes. If it doesn't, check that the snippet is published and that the Project ID is right.

For heatmaps and on-page surveys, see Add Hotjar to Joomla. For funnels and product analytics, see Add PostHog to Joomla. To learn more about how HTML snippets work, read the HTML snippet docs.