Microsoft 明确表示不适用于 Next js/React Js 项目

Vau*_*ein 10 next.js ms-clarity

我正在尝试让 Ne​​xt JS 项目更加清晰。我关注了一些在线资源,这些资源显示可以通过以下方式添加 Google 标签管理器/Clarity 的脚本。

文件: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}');`,
        }}
      />
Run Code Online (Sandbox Code Playgroud)

此代码成功触发并正在获取另一个脚本文件,该文件在执行时抛出错误。下面是 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=\u0027email\u0027]"]],
    "report": "https://www.clarity.ms/report/eus2f"
});
Run Code Online (Sandbox Code Playgroud)

抛出的错误如下:

第 8 行 Uncaught TypeError: a[c] is not a function a[c]("start", i) // 在这一行抛出错误

已调试a是窗口,c是字符串“clarity”。

该代码在 React 项目中运行良好,但在 Next JS 中不起作用。

Vau*_*ein 20

问题是将 id="clarity" 分配给脚本标记。

看起来 Clearity 试图插入一个 id="clarity" 的元素,这可能是问题所在。将 id 更改为其他内容即可。


小智 9

您可以使用react-microsoft-clarity包

npm install react-microsoft-clarity --save
Run Code Online (Sandbox Code Playgroud)

然后例如将其导入 _app.js

import { clarity } from 'react-microsoft-clarity';
Run Code Online (Sandbox Code Playgroud)

并使用您的 id 在 _app.js 组件的 useEffet 挂钩中使用它

clarity.init(id);
Run Code Online (Sandbox Code Playgroud)


fat*_*emi 6

您应该像 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");`,
   }}
 />;
Run Code Online (Sandbox Code Playgroud)