How to Install Microsoft Clarity? 👀

Unanswered

Britannia Petite posted this in #help-forum

Britannia PetiteOP

2025-02-01T19:53:32.881Z

Hey there, team, how goes it?

I would like to know how can install Microsoft Clarity.

I've made this on my code and still no working, would love some help, that's my code 👇

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  Clarity.init(projectId);

  return (
    <html
      lang='en'
      suppressHydrationWarning
      className={cn(
        inter.variable,
        geistMono.variable,
        'antialiased',
        'hide-scroll',
      )}
    >
      <Head>
        {/* Google Tag Manager */}
        <Script
          strategy='afterInteractive'
          src={`https://www.googletagmanager.com/gtag/js?id=G-T4FF6715QC`}
        />
        <Script id='gtag-init' strategy='afterInteractive'>
          {`
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'G-T4FF6715QC');
          `}
        </Script>
        {/* End Google Tag Manager */}

        <Script id='clarity' strategy='afterInteractive'>
          {`
            (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", "HIDDEN");
          `}
        </Script>
      </Head>

      <body className='overflow-auto bg-bg-white-0 text-text-strong-950 lg:bg-bg-weak-50'>
        <InitialLoader />
        <ThemeProvider attribute='class'>
          <TooltipProvider>
            <div className='flex min-h-screen flex-col'>
              <main className='flex flex-1 flex-col'>
                {children}
                <SpeedInsights />
                <Analytics />
              </main>
            </div>
          </TooltipProvider>
        </ThemeProvider>
        <NotificationProvider />

        {/* Google Tag Manager */}
      </body>
    </html>
  );
}

the "HIDDEN" it's proposital, but here on my code it's the exactly id code.

Would love some help to fix it, because it's no recognizing.

How to Install Microsoft Clarity? 👀

0 Replies