clarity: A error about call clarity.

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?

About this issue

Original URL
State: open
Created 2 years ago
Comments: 16

Most upvoted comments

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

loganpowell on Jun 2, 2023

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

loganpowell on Apr 11, 2023

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.

zvictor on Nov 6, 2022

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,
            },```

Bamorem on Sep 18, 2023

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.

casheeeewnuts on May 18, 2023

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…

hushanjushi on Nov 6, 2022

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 on Nov 6, 2022