NextJS 13与应用程序路由器如何添加Microsoft Clarity脚本到头部？

xt0899hw 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(100)

我试图将Microsoft Clarity添加到我的网站。我尝试使用next/head和next/script添加它，但它不允许我在头部使用脚本。当我实现它时，如下面的脚本没有添加到头部，清晰度无法正确显示我用户真正看到的内容。
编辑：我试图使用strategy=“afterInteractive”，但也不起作用。脚本不在头部。
编辑2：我添加了pages/_document.js，如docs中所述。脚本未加载。Docs NextJS
我将我的网站从Nuxt 3移动到NextJS。在Nuxt 3中，我设法将脚本添加到应用程序的头部部分，但我找不到一种方法在NextJS 13中使用应用程序路由器做同样的事情。下面是代码供参考。

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          id="ms-clarity"
          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", "keyyyy");
        `,
          }}
        />
      </head>
      <body className={inter.className}>{children}</body>
    </html >
  )
}

字符串

next.js

来源：https://stackoverflow.com/questions/76956442/nextjs-13-with-app-router-how-to-add-microsoft-clarity-script-to-head

1条答案

按热度按时间

nr9pn0ug1#

对于其他好奇的人来说，我通过将Script标记放在Head标记的外面，并将函数放在Script标记的里面来实现这一点。
这是在我的根布局页面（src/app/layout.tsx）

const RootLayout = async ({ children }: React.PropsWithChildren) => {
  return (
    <html lang="en">
      {/* Clarity Script */}
      <Script strategy="lazyOnload" id="clarity-script">
        {`
          (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", "keyyyyyy");
        `}
      </Script>

      <body>
        <main>{children}</main>
      </body>
    </html>
  );
};

export default RootLayout;

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

NextJS 13与应用程序路由器如何添加Microsoft Clarity脚本到头部？

1条答案

相关问题

热门标签

最新问答