Short: How to setup Google Analytics and Microsoft Clarity with Nextjs

2 min readJan 10, 2024

To understand this article, I assume that you already know the basics of Nextjs 13+.

Used in this tutorial ⚙️
Node: 21.5.0
Nextjs: 14.0.4

Folder Structure 📁

The first thing that you need to do is to create a folder metrics on your /app directory (/app/metrics). Afterward, create MicrosoftClarity.tsx, GoogleAnalytics.tsx and index.tsx inside the folder metrics.

GoogleAnalytics.tsx 📄

location: /app/metrics/GoogleAnalytics.tsx

On Google Analytics file we will have an enviroment variable called NEXT_PUBLIC_GOOGLE_ANALYTICS.

'use client'

import Script from "next/script"

const GoogleAnalytics = () => {
    return (
        <>
            <Script
                strategy="afterInteractive"
                src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
            />
            <Script
                id="google-analytics-init"
                strategy="afterInteractive"
                dangerouslySetInnerHTML={{
                    __html: `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());

                    gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}');
                    `,
                }}
            />
        </>
    )
}

export default GoogleAnalytics

MicrosoftClarity.tsx 📄

location: /app/metrics/MicrosoftClarity.tsx

On Microsoft Clarity file we will have an enviroment variable called NEXT_PUBLIC_MICROSOFT_CLARITY.

'use client'

import Script from "next/script"

const MicrosoftClarity = () => {
    return (
        <Script
            id="microsoft-clarity-init"
            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", "${process.env.NEXT_PUBLIC_MICROSOFT_CLARITY}");
                `,
            }}
        />
    )
}

export default MicrosoftClarity

Index.tsx 📄

location: /app/metrics/index.tsx

This file is just for organization, you could import both files directly inside your layout.tsx.

import GoogleAnalytics from "./GoogleAnalytics"
import MicrosoftClarity from "./MicrosoftClarity"

const Metrics = () => (
    <>
        <GoogleAnalytics />
        <MicrosoftClarity />
    </>
)

export default Metrics

layout.tsx 📄

location: /app/layout.tsx

Now on your layout.tsx file, located inside your /app directory, you can now import your Metrics component.

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import Metrics from './metrics'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <Metrics />
      </body>
    </html>
  )
}

.env.local 📄

location: /.env.local (root directory)

Finally, create an env.local file in your root directory to store your environment variables for Google Analytics and Microsoft Clarity.

When naming your environment variables, ⚠️ it is crucial to begin with NEXT_PUBLIC_ ⚠️ to ensure visibility on the client side.

NEXT_PUBLIC_GOOGLE_ANALYTICS=your_key
NEXT_PUBLIC_MICROSOFT_CLARITY=your_key

About me👤
Website: https://www.victor-harry.com/
Linkedin: https://www.linkedin.com/in/victorhcharry/