William Jing's Experimental Field

Adding Google Analytics to My Next.js Website

So, after tossing my resume into the digital universe. No one's registering on my website. It got me thinking, are people checking out my stuff and just not leaving a trace? Anyway, They don't viste my resume, guarded by Authorization. Well, time to don my web detective hat and install some tracking tools. Google Analytics seems like the go-to choice; it's practically a household name in the web analytics game.

Alright, buckle up for the Next.js magic. Step 1: Let's get the @next/third-parties library on board. A quick npm command does the trick:

npm install @next/third-parties@latest next@latest

Now, step 2: Sprinkle that GA script across every page. Easy peasy, just toss in the GoogleTagManager component. Here's how I did it in my RootLayout:

import { GoogleTagManager } from '@next/third-parties/google';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  );
}

Boom! Done. Now, watch those analytics roll in. Swap out "GTM-XYZ" with your actual Google Tag Manager ID, and you're in business.

Now my website's got its own watchdog, sniffing out user activities, even on the top-secret resume. Time to sit back, relax, and let the analytics magic unfold!