feat(analytics): add GA4 tracking

README.md

@@ -122,4 +122,8 @@ Guilherme Biff Zarelli
 - **LinkedIn**: [https://linkedin.com/in/gbzarelli/](https://linkedin.com/in/gbzarelli/)
 - **GitHub**: [https://github.com/gbzarelli](https://github.com/gbzarelli)
 - **Articles in Medium**: [https://medium.com/@guilherme.zarelli](https://medium.com/@guilherme.zarelli)
-- **Email**: [gbzarelli@helpdev.com.br](mailto:gbzarelli@helpdev.com.br)
+- **Email**: [gbzarelli@helpdev.com.br](mailto:gbzarelli@helpdev.com.br)
+
+## Google Analytics
+
+O site envia pageviews para a propriedade GA4 `HelpDev Website` (`G-FYBBYE3DXD`), incluindo navegações internas. Para usar outra propriedade, defina `NEXT_PUBLIC_GA_ID` no ambiente de build.

src/app/components/GoogleAnalytics.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
+import Script from "next/script";
+
+const measurementId = process.env.NEXT_PUBLIC_GA_ID || "G-FYBBYE3DXD";
+
+declare global {
+  interface Window {
+    dataLayer: unknown[][];
+    gtag: (...args: unknown[]) => void;
+  }
+}
+
+export default function GoogleAnalytics() {
+  const pathname = usePathname();
+  const lastTrackedPath = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!pathname || lastTrackedPath.current === pathname) return;
+
+    lastTrackedPath.current = pathname;
+    window.gtag("event", "page_view", {
+      page_path: pathname,
+      page_location: `${window.location.origin}${pathname}`,
+      page_title: document.title,
+    });
+  }, [pathname]);
+
+  return (
+    <>
+      <Script
+        src={`https://www.googletagmanager.com/gtag/js?id=${measurementId}`}
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics-init" strategy="beforeInteractive">
+        {`window.dataLayer = window.dataLayer || [];
+          window.gtag = window.gtag || function(...args) { window.dataLayer.push(args); };
+          window.gtag('js', new Date());
+          window.gtag('config', '${measurementId}', { send_page_view: false });`}
+      </Script>
+    </>
+  );
+}

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Footer from "./components/Footer";
+import GoogleAnalytics from "./components/GoogleAnalytics";
 import Script from "next/script";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -74,6 +75,7 @@ export default function RootLayout({
   return (
     <html lang="pt-BR">
       <body className={inter.className} suppressHydrationWarning>
+        <GoogleAnalytics />
         <Script id="ld-organization" type="application/ld+json" strategy="afterInteractive"
           dangerouslySetInnerHTML={{ __html: JSON.stringify({
             '@context': 'https://schema.org',