How to configure Microsoft Clarity for localhost in Angular app

Question

I'm trying to configure Microsoft Clarity to work on localhost in my Angular app.

When I created the new project on the Microsoft Clarity portal, I've set the URL to localhost (I've also tried with localhost:4200 as well) and then I copied the script and pasted it in the <header> of index.html page but seems to do nothing (no collect calls in the network tab, no logs in the portal).

I can't find what I'm doing wrong. Or Microsoft Clarity is not working with localhost?

Turnedon

Answer 1

In terms of installation, I just added it to index.html. But I am not sure if it can be used on localhost or you need a domain.

I saw yesterday performance issues by using MS Clarity on Angular v18 because it uses a lot of setTimeout/setInterval and that triggers Angular's change detection. So I will probably to change change detection or load it only in certain conditions. Be aware of this and check performance impacts.

Verdha

I used the Clarity JS code and placed it in the main component BUT to run outside Zonde.js with this.zone.runOutsideAngular(() => { //here }). An it seems not to impact performance and trigger change detection – Verdha

Answer 2

You have to put your website's real URL in the URL section, not the localhost address. but you can test Microsoft Clarity in localhost using the same projectId.

Ciliata

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Nazario

Answer 3

<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", "clarityId");
  </script>

add this code to index.html, inside tag and put your actual clarity id at the place "clarityId".

Victim