First of all, I would like to warn you that I have already read the Microsoft Clarity documentation, but there is not much guidance on the subject (https://learn.microsoft.com/en-us/clarity/heatmaps/troubleshooting-heatmaps#why-do-i-see-my-website-with-no-styling-just-html-no-css-or-old-styling-in-heatmaps).

I installed Microsoft Clarity yesterday and we have already started collecting data, but the screen/heatmap recordings are showing my entire website broken (images and css) – as shown in the image at this url: https://pasteboard.co/sdGAgEnBBjF8.png

My website is a WordPress, and I use some Firewall rules through Cloudflare. Among them, I have two firewall rules that may be causing some type of conflict:

• Allow known bots (ignore cf.client.bot);
• Challenge for accesses from countries outside Europe ((ip.geoip.continent eq “AF”) or (ip.geoip.continent eq “AN”) or (ip.geoip.continent eq “AS”) or (ip.geoip.continent eq “NA”) or (ip.geoip.continent eq “OC”) or (ip.geoip.continent eq “SA”) or (ip.geoip.continent eq “T1”) or (ip.geoip.country eq “RU”)).

That’s my main suspicion. According to the Microsoft Clarity documentation, they suggest that the user disable this type of rule. In our case, it is unthinkable to continue in this way. With that, I tried to search within the Firewall reports to see if I identified any blocked familiar bots, or some other type of action, but I found absolutely nothing.

Would it make sense for us to understand the name of the Microsoft Clarity bot that performs this action to add an exception? If so, could anyone guide me? If I’m completely wrong, what would be the way to solve this problem?