Website Analytics & Tracking Tools: A Complete Guide for Business Owners
After creating a website, it is important to monitor visitors, performance, and technical issues. For this, we use free analytics and tracking tools. These tools help us understand users, improve website quality, and fix problems.
In this guide, I'll explain each tool and show you exactly how to add them to your Next.js or React project.
1. 📊 Google Analytics 4 (GA4) — Free
About the Tool
Google Analytics is the most popular tool in the world for tracking website visitors. GA4 is the latest version with enhanced privacy features and cross-platform tracking.
What It Does
How to Add in Next.js
First, get your Measurement ID (starts with G-analytics.google.com
// app/layout.tsx (Next.js App Router)
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<head>
{/* Google Analytics */}
<Script
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
`}
</Script>
</head>
<body>{children}</body>
</html>
)
}Pro Tip: Use environment variables for your ID:
NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX2. 🔍 Google Search Console — Free
About the Tool
Search Console shows how your website performs in Google Search results. Essential for SEO.
What It Does
How to Verify in Next.js
Add the verification meta tag to your layout:
// app/layout.tsx
export const metadata = {
verification: {
google: 'your-verification-code-here',
},
}Or add it manually:
<meta name="google-site-verification" content="your-code" />3. 🏷️ Google Tag Manager (GTM) — Free
About the Tool
GTM lets you manage ALL your tracking codes from one dashboard—no code changes needed after initial setup.
What It Does
How to Add in Next.js
Get your Container ID (starts with GTM-tagmanager.google.com
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<head>
{/* Google Tag Manager - Head */}
<Script id="gtm-head" strategy="afterInteractive">
{`
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
`}
</Script>
</head>
<body>
{/* Google Tag Manager - Body (noscript) */}
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>
{children}
</body>
</html>
)
}4. 🔥 Microsoft Clarity — Free
About the Tool
Clarity provides session recordings and heatmaps completely FREE with no limits—unlike competitors.
What It Does
How to Add in Next.js
Get your Project IDclarity.microsoft.com
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<head>
{/* Microsoft Clarity */}
<Script id="microsoft-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", "YOUR_PROJECT_ID");
`}
</Script>
</head>
<body>{children}</body>
</html>
)
}5. ⏱️ Uptime Robot — Free/Paid
About the Tool
Monitors your website 24/7 and alerts you immediately if it goes down.
Free Plan Features
How to Set Up
No code needed! This is an external monitoring service.
Complete Analytics Component for Next.js
Here's a reusable component that includes all tracking scripts:
// components/Analytics.tsx
'use client'
import Script from 'next/script'
export default function Analytics() {
const GA_ID = process.env.NEXT_PUBLIC_GA_ID
const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID
const CLARITY_ID = process.env.NEXT_PUBLIC_CLARITY_ID
if (process.env.NODE_ENV !== 'production') return null
return (
<>
{/* Google Analytics */}
{GA_ID && (
<>
<Script src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} strategy="afterInteractive" />
<Script id="ga4" strategy="afterInteractive">
{`window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','${GA_ID}')`}
</Script>
</>
)}
{/* Microsoft Clarity */}
{CLARITY_ID && (
<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","${CLARITY_ID}")`}
</Script>
)}
</>
)
}Then add to your layout:
import Analytics from '@/components/Analytics'
// In your layout body
<Analytics />Summary
| Tool | Purpose | Cost | Code Required |
|---|
| Google Analytics | Visitor tracking | Free | Yes |
| Search Console | SEO monitoring | Free | Meta tag only |
| Tag Manager | Script management | Free | Yes |
| Microsoft Clarity | Session recordings | Free | Yes |
| Uptime Robot | Uptime monitoring | Free/Paid | No |
Need Help?
Abhisek Dubey
Software Engineer & Startup Mentor