Hi,

We are using Clarity on sites that deployed at our server, and we insert css links to dynamically using window.location.origin+css file path. but while testing, I noticed:

1. if I run at localhost, then the recording would not have my styles showing.
2. if I run at the server, the CSS will be shown for the new recordings and also the old recordings that were not having styles earlier.

I am wondering which css path is the recording using?

If the recording uses the newest run's css link, I also have recordings that use relative css file paths, and those recordings are not updated with css. If the recording uses the css file path at that run time, then why is the recording for localhost updated with the server's css files?

Thanks.

The document states here with data-clarity-unmask="True" on any div the div and its children will be unmasked.

However when inserting data-clarity-unmask="True" on a top level root div, none of the children div's and input elements are unmasks.

I find that placing data-clarity-unmask="True" must be done on a input div itself.

Can I unmask my entire site with a top level data-clarity-unmask="True" ? The reason for this is i find many non input fields on our site like h2 tags and other div tags that contains css and and text are being masked.

Solution : allow unmask everything option or allow data-clarity-unmask="True" on parent divs.

Thanks

I tried integrating clarity script in my website but it is throwing an error in VS Code.

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

`Parsing error: Unexpected token, expected "}"
   9 |                 <script type="text/javascript">
  10 |     (function(c,l,a,r,i,t,y){

11 | c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
| ^
12 | t=l.createElement(r);
13 | t.async=1;
14 | t.src="https://www.clarity.ms/tag/"+i;eslint
'}' expected.ts(1005)`

I am using the web frontend.
How do you remove recordings selectively?

As tracking is enabled by default now (#88), there is no chance to run clarity out of the box without setting tracking information in cookies now. This makes it necessary to load clarity after cookie consent is given by any user. Nevertheless it would be good to load clarity right from the start and "upgrade" the session to store information in cookies and session store when the user signals his consent e.g. by clicking accept on a cookie consent dialog later on.

This way at least part of the information is available even though different page views of the same user will not be combined to a session, when no consent is given. But if consent is given all information (even those from the very beginning) will be available. Which is not the case currently, as the load of the script has to be delayed.

I'm trying to use Clarity with an Angular SPA. So far most things are working, but I only get one URL. It looks like if I call clarity('stop'); and clarity('start') after each navigation event it should work, but it appears to run into the infinite loop mentioned in upload.ts. Any guidance appreciated.

Is there a public method or a setting that can be set to false to stop collecting the data for clarity. we would need this to enable / disable clarity based on end user cookie consent.

Hi new to Clarity. It seems my clarity is not recording any desktop sessions even though they have been logged on the dashboard and the option (little camera icon) to view them is there.
Has anyone else had this problem? Even if I remove filters - sessions that have taken place on mobile have only been recorded.

Hi there - I tried installing Clarity on our Shopify site https://www.maisonmiru.com/ and it appears to send data correctly, but is producing a ton of the following in Chrome 86.0.4240.111 on MacOS:

Uncaught (in promise) TypeError: Cannot read property 'active' of undefined
at Kt (clarity.js:2)
at clarity.js:2
at clarity.js:2
at Object.next (clarity.js:2)
at clarity.js:2
at new Promise ()
at vt (clarity.js:2)
at clarity.js:2
at Ae (clarity.js:2)
at da (clarity.js:2)

This happens whether I insert the code via Google Tag Manager or even manually run it in the console, so it should be easy to repro.

Volunteering to improve wiki with "Add Custom Tag" Section via Google Tag Manager

Problem

Need to add a custom tag e.g. {{name}} as a custom tag via GTM

Having Clarity injected with GTM, how does one add a MS Clarity custom tag?

GTM Injection:

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

MS Clarity custom tag

From docs https://docs.microsoft.com/en-us/clarity/custom-tags

clarity("set", "key", "value");

But GTM does not define clarity.

Where should clarity("set", "key", "value"); be placed in Google Tag Manager?

We have recently added clarity scripts to our site. Added the below-highlighted domain on Content Security policy. But still, we have an error. Please let me know if any domain is required to add in CSP to fix the console issue?

Thanks.

Hello! Since adding this on Google Tag Manager, my react-router and window.location seem to get out of sync when clicking around fast on my react app. I tracked it down to this specific package. When it's connected, it breaks, when it's not, it runs fine.

Hi folks!

After embedding the trackinig code, i can't see how to manually init/start/stop/resume the data collection.
Those function are required to call from the outside to allow cookie consent manager to work, but the (window) clarity obj does not include those functions ..

Any help is much appreciated :)
Niklas

Hello, I am trying to install Clarity on my app, a SPA built with Nuxt.js. Since it is a SPA, all the resources required to navigate through the website are loaded on the first page load. The application will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made. Therefore, the snippet code is run only once for the first page which is not very convenient.

Is there a way to update the Microsoft Clarity tracker manually? That way, each time a route changes, I would update manually the tracker and get data on the page the user is actually browsing in.

Does Clarity provide API access to the data?

Our use case: We will use these as features in our predictive models for marketing/promotions.

I added the data-clarity-mask="True" to an input element. When I enter data the value is masked and sent. When I change the data, the new value is masked and sent and the old value is sent as well but it is not masked anymore. Here is a video of developer tools on Chrome browser.

In sharepoint online, there is a suite bar which holds current user information. When I try to mask it by adding the CSS selector, is is not masked. What I try to mask in html is this:

<div id="O365_HeaderRightRegion" class="_3dI0ki9xB1drDG0Vs1vrS o365sx-button"><div class="_26VD_pe1GeiveQieoZ7ZgV"><button id="O365_MainLink_Me" class="_2-4jfRBkDLE1Xuu-op_VA2 _3BTGLBHOWIlEPYjHpiX4Jl o365sx-button o365sx-highContrastButton" role="button" aria-expanded="false" type="button" title="Account manager for a person" aria-label="Account manager for a person here"><div class="_3Lb2vsW2ownHe7x4OC6xKn"><div class="_3WqBR3fPzXEKltMjNYLDAj undefined"><span style="display: none;">person name</span></div><div class="_2-4jfRBkDLE1Xuu-op_VA2 _3a2rsMtCznztS3xhL4DybP"><div id="O365_MainLink_MePhoto" class="bFOkb2fz3s9MR3PfzJZds"><div><div class="_3OFPOuvhHOYjd1fO_g_ymI"><div><div class="W3SxI5cuS3WM1UXD8WZsU" style="width: 32px; height: 32px;"><div id="meInitialsButton" class="_1n_05gxDIBq6yRk2zHIufH _2FMKuLI3AbbpDnxke5MTeF" aria-hidden="true" style="font-size: 16px;">SV</div><div class="_2KqWkae0FcyhdNhWQ-Cp-M"><img alt="SV" style="display: none;" src="data:image/jpeg;base64,"></div></div></div></div></div></div></div></div></button></div><div class="_26VD_pe1GeiveQieoZ7ZgV"><a id="O365_MainLink_Signin" class="_2-4jfRBkDLE1Xuu-op_VA2 _3BTGLBHOWIlEPYjHpiX4Jl o365sx-button o365sx-highContrastButton" role="button" type="button" aria-label="Sign in" style="display: none;"><div class="_3Lb2vsW2ownHe7x4OC6xKn"><div class="_3T845fg-MFrzJz6PkME674 undefined"><span style="display: inline;">Sign in</span></div><div class="_2-4jfRBkDLE1Xuu-op_VA2 _3a2rsMtCznztS3xhL4DybP"><div id="O365_MainLink_SigninLink" class="_3HfJrncG7qGAlx5NhCMQhh"><span class="ms-Icon--Contact ms-icon-font-size-18 o365sx-accent-font _3mRfh0G7CerR_KRsABKXYF" role="presentation" style="display: inline-block; font-size: 18px;"></span></div></div></div></a></div><div id="O365_UniversalMeContainer"></div></div>

I tried masking this entire block by adding this in the masking css selector:

#O365_HeaderRightRegion *

Unfortunately this did not work. I also tried to target some elements directly using the class like this:

.o365sx-button

Again, nothing happened. I have no clue how to mask this sensitive part of the sharepoint online site and was expecting to mask it using the css selector.

I'm trying to use the Config interface but it is not exported from index.d.ts.

This seems like an important export no?

Would be interested to hear if there is a different pattern others are using, or if it's potentially an oversight etc?

Hi @sarveshnagpal @swaathee

We know that support for SPA was fixed since #77 but for the Google Analytics integrations, we don't believe this feature supports SPAs (or is incorrectly implemented) because we have a form submission event in GA where we see a lot of (entrance) values for the Goal Completion Location dimension under Conversions. However, looking at the Clarity Playback URL provided, we see that the user submitted the form on a different page further into the site. Some locations are correct though so it seems to be hit and miss?

Could you guys take a look?

Hello,

I want to use Clarity for my website which is developed using the Spring MVC framework. We used JSP+Bootstrap+JQuery to build our UI. When we integrated clarity and try to review the recording the UI is not properly loading i.e it is not applied any CSS and images are broken etc.

I want some help is there anything else that I need to configure.

Thanks
Shiva Prasad

Hello, not sure if this is directly related to the codebase but I tried emailing [email protected] as indicated in the doc and I got an automatic email reply:

Your message to [email protected] couldn't be delivered.

clarity-onboarding wasn't found at microsoft.com.

Greetings! As title says, in certain circumstances, Clarity can break navigation in a Gatsby.js project.

I've created a SSCCE repository here (its default Gatsby starter with Clarity script injected in useEffect).

Pre-requisites:
Node.js 10.13.0+
Latest version of Chrome

Steps to reproduce:

1. Clone the example repo.
2. Run npm install
3. Run npm run start
4. Open http://localhost:8000/ in browser
5. Click on "Go to page 2" link; you'll be redirected to "/page-2"
6. Click on "Go to page 3" link; you'll be redirected to "/page-3"
7. Click browser "back" arrow button; you'll return to "/page-2"
8. Click on "Go to page 3" link again - this time you won't be redirected anywhere

My suggestion is that it is somehow connected with the fact that Clarity reassigns history pushState and replaceState methods, and Gatsby links rely on them under the hood. I don't quite understand why this happens though, cause original methods are still called inside the proxied ones...

Using plain a tags instead of Gatsby links isn't really an option, cause the latter have extra logic, like pre-loading chunks for referenced page upon hover, which is quite useful for my project.

Are there any opportunities to make these two things working together?

Session Records do not contain "Referrer" information
This will enable developers understand if the session recording came from perhaps a Bing ad or a transactional email, allowing us to track the lifecycle of the user session.

Further, in the session listing, it would be nice to add a Flag color graphic of the session country origin.

I would like to know if it is possible to add two sets of Tracking Codes to a single website (with different Project IDs).

The benefit of doing this is that you could have one Clarity Project that collects data from every single page on a website and another Clarity Project for managers of individual business units.

My website would allow for an admin to see aggregate data from all Projects and each Business Unit manager would only see data from pages owned by them.

www.mywebsite.com/BusinessUnit1/xxx
www.mywebsite.com/BusinessUnit2/xxx

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

-----IF page owned by BusinessUnit2. Add additional script to header------

`

I have tried to test this but due to the lag in Clarity Recordings it is difficult to tell if it is working. It looks like it functions without error but sessions are only recorded against one Clarity Project randomly.

Could doing this cause unpredictable results?

I can use this concept with Google Analytics without issue.

The recordings from sharepoint online sites are not working stable. Sometimes the suite bar (top bar) is there, and sometimes it is just no captured at all. Also, sometimes the page size is very off and even the entire page is just not showing (blank).
Could it be that the logic for screen recording is not working for SharePoint Online?

good capture in SPO:

blank SPO page recorded:

no suite bar in SPO:

Hi 😄
We are using Clarity along with autogenerate gh-pages site.
We were able to integrate Clarity, but heatmaps and recordings are not showing CSS and are unreadable.
I've seen that it might relate to browsing insecurely (http), which is not the case here, or using relative paths when referencing css files, and in that case, we don't have much control, as we are using a framework to generate the website assets.
Can you verify that only the above cases might relate to our issue and if so, do you have a solution for the latter?
Thanks, Sharon

Our users frequently work with many open tabs in our app. The problem is that Clarity seems to register each tab as a different session, so we sometimes get 30 separate 1-minute recordings of a user instead of a single 30-minute session, which can be annoying.

Is there any solution for this?
Thanks,
Bogdan

I am having this problem with automatically updating clarity v0.6.8.
This issue occurs only iOS.

TypeError: Member PerformanceObserverInit.entryTypes is required and must be an instance of sequence

Sentry error log(screenshot):

Can I downgrade clarity version to v0.6.7?

I'm using google optimize for A/B tests and trying to setup custom tags so I can segment the original vs variant 1 in clarity.
I'm using shopify and have integrated directly to theme code.

Firstly,
I've added the following to the theme code:
clarity("set", key, "value");
Then added the following as javascript to the google optimize variant.
clarity("set", experiment, "variant1");

I get a "clarity not defined" error message in google optimize.

Running into some issues.

1. The tags aren't pushing into clarity so can't group (I waited more than half a day)
2. I'm unsure if this is the correct way to added custom tags to google optimize
3. How do I group the original vs the variant so I can view them separately in clarity.

After clarity was updated from 0.6.0-beta.22 to 0.6.0 we start to expect an issue on all our websites - in some cases all requests hangs in pending state and page became unresponsive. If clarity is disabled, either by removing integration or even if it just blocked in Chrome dev tools (by url) - all works good, without any issue.
We have angular 6 single page application.

Similar tools like Hotjar offer this feature for heatmaps of capturing mouse movement, do you have any plans on adding something similar for Clarity?

It's a super useful feature, and it would be great to be able to use something like that on your tool.

P.s: If you already have a roadmap for the features, it would be nice to know about it too 🙂 . I couldn't find anything related to that here or on the website.

When I replay a session thanks to the visualizer (with 4 sequences), it renders in about 7 seconds. But if I sum the duration of each sequence (found in the envelope), it gives me a total that is much higher than the one I have during the replay: for the actual example the sum is 16595 (so 16 seconds I guess). Maybe it's because it's the real time of the session, instead of the replay time; in this case, is there a way to have the duration of the replay? I use a code highly inspired by the code of the devtool: https://github.com/microsoft/clarity/blob/master/packages/clarity-devtools/src/panel.ts#L49-L61 (and I play a new sequence as soon as the previous one is finished).

Video (I hope the speed is preserved in gif conversion, it's about 7 seconds before conversion, there are 4 sequences)

The values stored thanks to the decoder:

I guess the duration is the real time the user has spent on page. Could you confirm this? If so, is there a way to have the time of the replay?

Preface

I know this issue might not be related to this repo. I was asked to create an issue here by a community expert at Microsoft Docs. My question on Webmasters regarding this issue remains unanswered at the time of creating this issue.

The Issue

I followed the official setup guide to add Microsoft Clarity on my website using Google Tag Manager. I am getting CORS policy violation errors and 503 errors on my website. Some outbound requests to Clarity are failing.

Error Log

14:47:17.201 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:47:17.203 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:47:57.731 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:47:57.734 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:48:03.072 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:48:03.073 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:48:03.551 Access to XMLHttpRequest at 'https://www.clarity.ms/eus2/collect' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
14:48:03.552 www.clarity.ms/eus2/collect:1 Failed to load resource: net::ERR_FAILED
14:48:04.504 www.clarity.ms/eus2/collect:1 Failed to load resource: the server responded with a status of 503 ()

Screenshot

I've just found this tool and tried to install it on my site which uses web components.
Unfortunately the records just appear as white screens and there isn't any recorded clicks.

Is the heatmap a part of the opensource code if yes then can you please let me know how can I use it in my own project?

Where is the data stored by clarity. Will it be in my tenant data center or outside my tenant.
Can I see in which location the data is stored?

Thank you for this package. I tried to use clarity-visualize but failed to understand how to use it. I tried this but it does not work:

const my_decoded_data = [
  {"doc": [{ "data": { "width": 1425, "height": 837 }, "time": 3, "event": 8 }], /* ... */ },
  /* ... */
];
visualize.html(my_decoded_data, document.getElementById("some-iframe")).render();

TBH, I have no idea what I am doing here 😅

I successfully managed to use clarity-js and clarity-decode but this one is harder to understand.

We have a user flow where the visitor is on one domain and then is redirected to a new page on a different domain. We're seeing different recording sessions created but would like this in one recording -- we were using the same clarity snippet on both domains. Is it possible to configure clarity so the recording is captured in the same session?

Whenever I'm using heat maps and I select 30 days or a custom date selection it zooms the screen so it's impossible to work with. Has anyone else experienced this? It works fine for 3 days, but 30 screws it up completely.

Hi, ms clarity team.

We recently started to have an issue with the address bar after our product owner has installed ms clarity on google tag manager by following the steps in the docs related to the installation of ms clarity from this link.

The issue is currently observable by visiting our page. The browser's address bar stops updating (continues to display the same address although it should change) after a few clicks (after two-three clicks...) on the top menu and category links expanding under the top menu items.

We tracked the issue down to ms clarity after undertaking several tests. The issue is gone if we block ms clarity URL requests via network pane in developer tools through an adBlocker.

We need a quick resolution or a recommendation since it is visible on our live page and we would like to continue using this product. It is probably negatively affecting our users and therefore our client's operation. Hoping to hear from you as soon as possible.

Edit (update): In an attempt to find a workaround for this problem in our testing environment, I tried to override the history state with history.replace but I receive the error (please see attached image) coming from clarity after a few clicks because obviously clarity is trying to replace history too with history.replace (as evident from the error). We are using frontastic to serve our page. It handles all our routers. The issue seems to be connected to ms clarity script which is trying to change (replace) the history state. The workaround causes ms clarity to break with an error making the page no longer functional. Therefore, we are urgently expecting your recommendation, update, fix on the issue....

(p.s. I am working as a front-end developer in the above-mentioned project's development team. We have also noticed a slowing down in the page's general operation after installation, which may or may not be related to this issue. Stalled URL state issue linking to ms clarity, verified with our tests, is of our higher priority at the moment.)

For our domain vue.ai and getblox.ai, our CSS file names change automatically with every release. As a result, styles are not applied when I choose a longer time range. Clarity will need to pull the latest CSS every time instead of loading from the cache.

I'm trying to use clarity for my angular SPA, but the recordings only displays the entry page, even when user navigates to different pages ( Sometimes i see just a blank screen) . Looks like it doesn't capture URL changes correctly, nor does it navigate to the changed page.

I try to use clarity-js, clarity-decode and clarity-visualize but it seems dom is empty in what I receive in backend. So input events do not work in visualization, the only thing that works is mouse movement. I may have missed something.

• In the page I want to record I use this :

// It's in a react project, so the code below is in a useEffect() function after dom is rendered:
const clarity = (await import("clarity-js")).clarity;
clarity.start({ upload: postDataToBackend }) // <= Just a fetch function that post to backend
// In a console log, I can see that everything is sent to backend, fine (but I can't see anything about dom itself)

• in backend I decode then send to database:

const d = decode(req.body);
// then send to database everything is stored, great.

• in the page where I want to display the screen record:

<iframe src="path/to/the/page/I/recorded"></iframe>

visualize.setup(...) // with what I have from database
const merged = visualize.merge(...)
await visualize.dom(merged.dom);
// The problem is here I guess: merged.dom is empty.
// then the playback works, but only for mouse movement. 

I digged into the code and it seems these lines are never true:

I'm sorry about this confuse issue, feel free to ask me for more info (since there is a lack of documentation, it's hard to find where to start to understand usage).

By using the recommended clarity tracking code

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

the following script is returned

(function(c,l,a,r,i,t,y){t=l.createElement(r);t.async=1;t.src=a;y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);c('start', i);c.q.unshift(c.q.pop());})(clarity, document, 'https://www.clarity.ms/xxx/s/0.6.3/clarity.js', 'script', {"projectId":"xxxxxxxx","upload":"https://www.clarity.ms/xxx/collect","expire":365,"cookies":["_uetmsclkid","_uetvid"],"track":false,"content":true});

As track is set to false initially the only way to activate tracking is by calling clarity('consent');. So far so good, but this call only sets tracking to active and stores the respective cookie, It does not call save on metadata.ts to store session information in the session store. So clarity only tracks 1 page per session, as it updates the session information on every single page.

The only other function which is available is upgrade on upgrade.ts, but this one is called periodically from a timer and will call save only once. If this happens before track is set to true, there is no chance to get the session information stored.

The only workaround I found is modifying the script above and get it activated/loaded after the user accepted cookies. Nevertheless there are two issues with this.
a) the script might change in the future (especially the upload servers) and this will break the current workaround
b) clarity should run as a cookieless version even before users accept cookies

hi
I want to Setup Clarity in angular.
how i can do this
please add guide to your docs

How can I ensure that users are distinct in Microsoft clarity in sharepoint online

all projects I have running in Clarity no longer have data in the last 3 days.

Whenever someone navigates to a new page Clarity stops the current recording and starts a new one, is there any way that we can record whole sessions including when the user navigates to a new page?

I'm loading clarity using Google Tag Manager and seeing this error on Sentry:

TypeError: Cannot read property 'attempts' of undefined

In this line:
{snip} (6);break;case"UPGRADE":lt("Auto")}}(t.responseText),aa[e].attempts>1&&q(3),delete aa[e]))}function va(t){var e=[a(),t];switch(t){case 4:var {snip}

The collect calls seem to be working correctly.

We're using clarity on a rails site using turbolinks. We've implemented the js through GTM, and we trigger it off the turbolinks:load event. We sort of intermittently don't have clarity recognizing url changes. Turbolinks uses the history api, and sometimes clarity seems to pick up the url changes appropriately. Is there a way to fire a clarity method to indicate a url change?