Share
Building a portfolio is one thing, but tracking how users interact with it takes the learning to another level. Today I successfully implemented Vercel Analytics and Google Analytics in my portfolio, and honestly, the entire learning process was very interesting.
How Curiosity Led to Learning
While scrolling through LinkedIn, I came across a post where a developer explained how he tracks users on his portfolio website. Out of curiosity, I commented: "How do you track users on your portfolio site?" After he replied, I started thinking: "I already have a portfolio too. Why not implement this feature myself?" That is where the research journey started.
The Research Process
First, I searched on Google: "how to implement google analytics in next js". Right after searching, I found the official Next.js documentation along with some Gemini-generated code suggestions. Then I discussed the topic with ChatGPT to understand the implementation process more clearly. It explained the workflow step by step. After that, I watched a couple of YouTube tutorials and started implementing the feature in my own portfolio.
Implementation: Vercel Analytics
Vercel Analytics is extremely easy to set up. First, install the package:
npm i @vercel/analyticsThen, add it to your root layout:
import { Analytics } from "@vercel/analytics/react"
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body>
{children}
<Analytics />
</body>
</html>
)
}Implementation: Google Analytics
To connect Google Analytics with my Next.js portfolio, I first imported the Script component from next/script. This component helps load external scripts in a more optimized and performance-friendly way inside Next.js applications. Instead of adding normal script tags manually, Next.js manages when and how the scripts load, which improves page performance and avoids hydration issues.
import Script from "next/script";The first Script loads the official Google Analytics tracking library directly from Google Tag Manager using my Google Analytics Measurement ID stored inside an environment variable called NEXT_PUBLIC_GA_ID. I used strategy="afterInteractive" so the analytics script loads only after the page becomes interactive. This keeps the initial page load faster and prevents analytics from blocking important UI rendering.
NEXT_PUBLIC_GA_ID= Your google analytics measurement idAfter loading the Google Analytics library, I added another Script with the id "google-analytics". Inside this script, I initialized Google Analytics using the global dataLayer array. The gtag() function pushes tracking events into dataLayer, and then Google Analytics starts tracking user activity when gtag("config", process.env.NEXT_PUBLIC_GA_ID) runs.
Using this setup, my portfolio can now track real user interactions such as page visits, traffic sources, user sessions, engagement time, and overall visitor behavior. One thing I really liked about this implementation is that it works smoothly with the Next.js App Router and keeps the analytics setup clean, scalable, and production-ready.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${jakarta.variable} ${inter.variable} font-sans antialiased selection:bg-primary selection:text-primary-foreground`}
suppressHydrationWarning
>
<Script
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
strategy="afterInteractive"
/>
<Script id="google-analytics" strategy="afterInteractive">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
`}
</Script>
<main className="flex-1">
{children}
</main>
</body>
</html>
);
}What I Track Now
- How many users are visiting the portfolio
- Which pages are getting the most views
- Where users are coming from
- How long they stay on the site
Lessons Learned
Alhamdulillah, the implementation was successful. One important thing I learned from this experience: A developer’s growth often starts with curiosity. A simple LinkedIn post inspired me to learn and implement an entirely new feature.
Conclusion
I hope you found this blog helpful. If you have any questions, please feel free to contact me. If you didn't understand the implementation, you can watch the video tutorials below.
Video Tutorials
How i implemented Google Analytics in my portfolio
EnglishHow to implement Google Analytics in my portfolio using Next.js App Router.
Google Analytics Next.js Setup
HindiOfficial implementation guide for Google Analytics in Next.js App Router.
Next.js Google Analytics Bangla Tutorial
HindiStep-by-step guide to adding Google Analytics to your Next.js project.
