Microsoft clarity不支持Next js/React js项目

Question

我正试图为下一个JS项目添加清晰度。我跟踪了一些在线资源，这些资源显示，谷歌标签管理器/清晰度的脚本可以通过以下方式添加。

文件:app.tsx

<Script
id="clarity"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
(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", '${CLARITY_KEY}');`,
}}
/>

这段代码成功触发，并且正在获取另一个脚本文件，该脚本文件在执行时抛出错误。下面是Clarity调用并抛出错误的脚本:

!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-f/s/0.6.34/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": "XmaskedX",
"upload": "https://www.clarity.ms/eus2-f/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, 510, "screen.isExtended", 0, 511, "navigator.cookieEnabled", 0, 512, "navigator.onLine", 0, 513, "navigator.doNotTrack", 0, 514, "navigator.connection", 0, 515, "navigator.vendor", 0, 516, "navigator.product", 0, 517, "navigator.productSub", 0, 518, "navigator.pdfViewerEnabled"],
"fraud": [[1, "input[type=u0027emailu0027]"]],
"report": "https://www.clarity.ms/report/eus2f"
});

抛出的错误如下:

第8行Uncaught TypeError: a[c]不是函数A [c]("start"， i)//在这一行抛出错误

已经调试了a是窗口，c是字符串"clarity"

代码在React项目中可以正常工作，但在Next JS中不能工作。

Answer 1

分配id="clarity">

似乎clarity试图插入一个id="clarity"这可能就是问题所在。将id更改为其他内容可以工作。

Answer 2

您可以使用react-microsoft-clarity package

npm install react-microsoft-clarity --save

然后导入到_app.js

import { clarity } from 'react-microsoft-clarity';

，并在_app.js组件的useEffet钩子中使用它，id为

clarity.init(id);

Answer 3

你应该像在nextJs中设置这样的语法代码对于Nextjs版本10及以下:

<script
dangerouslySetInnerHTML={
{
__html: `
(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", "XXXXXXXXX");`,
}}
/>;

Answer 4

我使用的是本地脚本标签

<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", "clarity-key");`}
</script>

Answer 5

这里是我发现有用的资源-对Next.js版本很有用。13.4.9:

• Clarity GitHub issue here
• Next.js docs about Script component here

*_app.tsx*
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 App({ Component, pageProps }: AppProps) {
return (
<>
<Component {...pageProps} />
<Script id="ms-clarity" strategy="afterInteractive">
{clairtyCode}
</Script>
</>
);
}