A error about call clarity.

[hushanjushi]

I use below in my website:(xxxxxxx is the proj id)

<script async="" src="https://www.clarity.ms/tag/xxxxxxx"></script>

But it show in F12:

Uncaught TypeError: Cannot read properties of undefined (reading 'v')
at xxxxxxxx:1:79
at xxxxxxxx:1:329

And after 24 hours, my clarity dashboard is empty.So what should i do?

[hushanjushi]

And I have remade it in windows,linux, in edge and firefox

[ClaritySupport]

@hushanjushi , apologies for the inconvenience. We would love to help you get the issue resolved. Could you email us at [email protected] for our support team to further assist you?

[zvictor]

How was that solved? I am having the same issue at https://bekiwi.net/homeoffice

[hushanjushi]

How was that solved? I am having the same issue at https://bekiwi.net/homeoffice

No, it didn't solved. May be the brower permission. But I'm not front developer

[zvictor]

I have been studying the problematic code. Here it is:

! function(c, l, a, r, i, t, y) {
	if (a[c].v || a[c].t) return a[c]("event", c, "dup." + i.projectId);
	a[c].t = !0, (t = l.createElement(r)).async = !0, t.src = "https://www.clarity.ms/eus2-d/s/0.6.43/clarity.js", (y = l.getElementsByTagName(r)[0]).parentNode.insertBefore(t, y), a[c]("start", i), a[c].q.unshift(a[c].q.pop())
}("clarity", document, window, "script", {
	"projectId": "eed1iirzov",
	"upload": "https://j.clarity.ms/collect",
	"expire": 365,
	"cookies": ["_uetmsclkid", "_uetvid"],
	"track": true,
	"lean": false,
	"content": true,
	"extract": [0, 501, "window.navigator.hardwareConcurrency", 0, 502, "window.navigator.deviceMemory", 0, 503, "window.navigator.platform", 0, 504, "window.navigator.maxTouchPoints", 0, 505, "window.devicePixelRatio", 0, 506, "navigator.connection.downlink", 0, 507, "navigator.connection.downlinkMax", 0, 508, "navigator.connection.effectiveType", 0, 509, "navigator.connection.rtt", 0, 510, "screen.isExtended", 0, 511, "navigator.cookieEnabled", 0, 512, "navigator.onLine", 0, 513, "navigator.doNotTrack", 0, 514, "navigator.connection.saveData", 0, 515, "navigator.vendor", 0, 516, "navigator.product", 0, 517, "navigator.productSub", 0, 518, "navigator.pdfViewerEnabled", 0, 519, "navigator.connection.type", 3, 1, ["4f509md79", "zjy56jaz", "4s4zm72hj"]],
	"unmask": ["body"]
});

If we "evaluate" the variables, we would get to the following statement in line 2:

if (window["clarity"].v || window["clarity"].t)

Which is supposed to break, given that window.clarity has not been defined at all. My surprise is not that this script fails, but that nobody else is reporting it. 😅

I wanted to push a PR to improve it, but couldn't find where this snippet is located.

[hushanjushi]

I have been studying the problematic code. Here it is:

! function(c, l, a, r, i, t, y) {
	if (a[c].v || a[c].t) return a[c]("event", c, "dup." + i.projectId);
	a[c].t = !0, (t = l.createElement(r)).async = !0, t.src = "https://www.clarity.ms/eus2-d/s/0.6.43/clarity.js", (y = l.getElementsByTagName(r)[0]).parentNode.insertBefore(t, y), a[c]("start", i), a[c].q.unshift(a[c].q.pop())
}("clarity", document, window, "script", {
	"projectId": "eed1iirzov",
	"upload": "https://j.clarity.ms/collect",
	"expire": 365,
	"cookies": ["_uetmsclkid", "_uetvid"],
	"track": true,
	"lean": false,
	"content": true,
	"extract": [0, 501, "window.navigator.hardwareConcurrency", 0, 502, "window.navigator.deviceMemory", 0, 503, "window.navigator.platform", 0, 504, "window.navigator.maxTouchPoints", 0, 505, "window.devicePixelRatio", 0, 506, "navigator.connection.downlink", 0, 507, "navigator.connection.downlinkMax", 0, 508, "navigator.connection.effectiveType", 0, 509, "navigator.connection.rtt", 0, 510, "screen.isExtended", 0, 511, "navigator.cookieEnabled", 0, 512, "navigator.onLine", 0, 513, "navigator.doNotTrack", 0, 514, "navigator.connection.saveData", 0, 515, "navigator.vendor", 0, 516, "navigator.product", 0, 517, "navigator.productSub", 0, 518, "navigator.pdfViewerEnabled", 0, 519, "navigator.connection.type", 3, 1, ["4f509md79", "zjy56jaz", "4s4zm72hj"]],
	"unmask": ["body"]
});

If we "evaluate" the variables, we would get to the following statement in line 2:

if (window["clarity"].v || window["clarity"].t)

Which is supposed to break, given that window.clarity has not been defined at all. My surprise is not that this script fails, but that nobody else is reporting it. 😅

I wanted to push a PR to improve it, but couldn't find where this snippet is located.

Yeah, it seems that no developer works for it. I have given up using it.

[hushanjushi]

I have been studying the problematic code. Here it is:

! function(c, l, a, r, i, t, y) {
	if (a[c].v || a[c].t) return a[c]("event", c, "dup." + i.projectId);
	a[c].t = !0, (t = l.createElement(r)).async = !0, t.src = "https://www.clarity.ms/eus2-d/s/0.6.43/clarity.js", (y = l.getElementsByTagName(r)[0]).parentNode.insertBefore(t, y), a[c]("start", i), a[c].q.unshift(a[c].q.pop())
}("clarity", document, window, "script", {
	"projectId": "eed1iirzov",
	"upload": "https://j.clarity.ms/collect",
	"expire": 365,
	"cookies": ["_uetmsclkid", "_uetvid"],
	"track": true,
	"lean": false,
	"content": true,
	"extract": [0, 501, "window.navigator.hardwareConcurrency", 0, 502, "window.navigator.deviceMemory", 0, 503, "window.navigator.platform", 0, 504, "window.navigator.maxTouchPoints", 0, 505, "window.devicePixelRatio", 0, 506, "navigator.connection.downlink", 0, 507, "navigator.connection.downlinkMax", 0, 508, "navigator.connection.effectiveType", 0, 509, "navigator.connection.rtt", 0, 510, "screen.isExtended", 0, 511, "navigator.cookieEnabled", 0, 512, "navigator.onLine", 0, 513, "navigator.doNotTrack", 0, 514, "navigator.connection.saveData", 0, 515, "navigator.vendor", 0, 516, "navigator.product", 0, 517, "navigator.productSub", 0, 518, "navigator.pdfViewerEnabled", 0, 519, "navigator.connection.type", 3, 1, ["4f509md79", "zjy56jaz", "4s4zm72hj"]],
	"unmask": ["body"]
});

If we "evaluate" the variables, we would get to the following statement in line 2:

if (window["clarity"].v || window["clarity"].t)

Which is supposed to break, given that window.clarity has not been defined at all. My surprise is not that this script fails, but that nobody else is reporting it. 😅

I wanted to push a PR to improve it, but couldn't find where this snippet is located.

I'm not developer for microsoft or clarity. I'm just a user of clarity...

[loganpowell]

I'm running into the same issue on a Next.js app

[ClaritySupport]

@loganpowell , Could you please share project ID and website address where you getting the error to assist you further.

[uchigaki-lvgs]

There also seems to be a problem setting up Clarity for NextJs via GTM. The specified script does not have "window["clarity"]" set. Even if you avoid it by the method mentioned in other issues, you will get the same error via gtm. When I set the script statically and used it with gtm, I got an error at "a[c].q.unshift(a[c].q.pop())".

[ClaritySupport]

@uchigaki-lvgs , Could you please follow diffeerent menthods of installtion listed here https://learn.microsoft.com/en-us/clarity/third-party-integrations/google-tag-manager to integrate Clarity via GTM and let us know if any issues.

[uchigaki-lvgs]

@ClaritySupport I'm sorry, but I wouldn't say this if it was about the setting. I made an inquiry because the fetch script caused an error.

[casheeeewnuts]

Probably, this error is caused by browser's behavior.

Define the two code snippets as follows.

<script src="https://www.clarity.ms/tag/xxxxxxx"></script>

is ClarityLoadingScript and

! function(c, l, a, r, i, t, y) {
	if (a[c].v || a[c].t) return a[c]("event", c, "dup." + i.projectId);
	a[c].t = !0, (t = l.createElement(r)).async = !0, t.src = "https://www.clarity.ms/eus2-d/s/0.6.43/clarity.js", (y = l.getElementsByTagName(r)[0]).parentNode.insertBefore(t, y), a[c]("start", i), a[c].q.unshift(a[c].q.pop())
}("clarity", document, window, "script", {});

is ClarityExecutingScript.

Importantly, ClarityExecutingScript must be called after completed executing ClarityLoadingScript.

No problem if you write the following, because ClarityLoadingScript and ClarityExecutingScript will be executed synchronously.

<script src="https://www.clarity.ms/tag/xxxxxxx"></script>
<script>
  ! function(c, l, a, r, i, t, y) {
	if (a[c].v || a[c].t) return a[c]("event", c, "dup." + i.projectId);
	a[c].t = !0, (t = l.createElement(r)).async = !0, t.src = "https://www.clarity.ms/eus2-d/s/0.6.43/clarity.js", (y = l.getElementsByTagName(r)[0]).parentNode.insertBefore(t, y), a[c]("start", i), a[c].q.unshift(a[c].q.pop())
}("clarity", document, window, "script", {});
</script>

But if you write the following, error maybe caused.

<script async src="https://www.clarity.ms/tag/xxxxxxx"></script>
<script>
  ! function(c, l, a, r, i, t, y) {
	if (a[c].v || a[c].t) return a[c]("event", c, "dup." + i.projectId);
	a[c].t = !0, (t = l.createElement(r)).async = !0, t.src = "https://www.clarity.ms/eus2-d/s/0.6.43/clarity.js", (y = l.getElementsByTagName(r)[0]).parentNode.insertBefore(t, y), a[c]("start", i), a[c].q.unshift(a[c].q.pop())
}("clarity", document, window, "script", {});
</script>

In this case, async attribute is present on ClarityLoadingScript and when ClarityExecutingScript is executed, window["clarity"] maybe not be defined because it is not clear whether ClarityLoadingScript has completed execution or not. So Uncaught TypeError: Cannot read properties of undefined (reading 'v') was caused.

Make sure you are running ClarityExecutingScript after ClarityLoadingScript execution is complete.

@ClaritySupport Based on these, you should modify your GTM official template. Currently, Clarity's code snippets are inserted via GTM.

<script async="" src="https://www.clarity.ms/s/0.7.8/clarity.js"></script>
<script async="" src="https://www.clarity.ms/tag/xxxxxxxx?ref=gtm2"></script>

As explained above, when these two sources are read asynchronously, it is non-deterministic as to which completes first. So, you must to fix it to use the defer attribute instead of the async attribute.

Scripts with the defer attribute specified will be executed in the order they appear in the HTML document, but will not block the parsing of this.

[rajviahmedtamim]

Hey, I want use Microsoft clarity in my Nextjs Website. But I cannot find proper guideline how to use. If anyone know how to use Microsoft clarity. Plz tell us how to use.

[loganpowell]

@ClaritySupport , sorry for the delayed response. I got it to work with this snippet in my _document.tsx:

// _document.tsx

import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'

const clairtyCode = `
(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", "xxxxxxxxxxx");
`
export default function Document() {
    return (
        <Html lang="en">
            <Head>
                <Script id="ms-clarity" strategy="beforeInteractive">
                    {clairtyCode}
                </Script>
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    )
}

Hope it helps others!

Thank you for the great service 🙏

[Bamorem]

I'm having the same error and i'm using nuxt.config.js ( Nuxt @ v2.16.2 )

                src: `https://www.clarity.ms/tag/${process.env.CLARITY_PROJECT_ID}`,
                async: true,
            },```