diff --git a/README.md b/README.md index 1548890..0c7a11c 100644 --- a/README.md +++ b/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) \ No newline at end of file +- **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. diff --git a/src/app/components/GoogleAnalytics.tsx b/src/app/components/GoogleAnalytics.tsx new file mode 100644 index 0000000..8f993cd --- /dev/null +++ b/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(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 ( + <> + + + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 60f78a9..bb67ff9 100644 --- a/src/app/layout.tsx +++ b/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 ( +