diff --git a/package.json b/package.json index 23c5b1f3..df3cccd4 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "tailwindcss": "^3.4.4" }, "engines": { - "node": "^22", + "node": "^23", "npm": "use-pnpm" }, "packageManager": "pnpm@9.13.0+sha512.beb9e2a803db336c10c9af682b58ad7181ca0fbd0d4119f2b33d5f2582e96d6c0d93c85b23869295b765170fbdaa92890c0da6ada457415039769edf3c959efe", diff --git a/src/lib/gtag.js b/src/lib/gtag.js new file mode 100644 index 00000000..4c92896e --- /dev/null +++ b/src/lib/gtag.js @@ -0,0 +1,9 @@ +// eslint-disable-next-line no-restricted-globals, n/prefer-global/process +export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY; + +// https://developers.google.com/analytics/devguides/collection/gtagjs/pages +export const logPageview = (url) => { + window.gtag("config", GA_TRACKING_ID, { + page_path: url, + }); +}; diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 80d770f0..8b27e39c 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,12 +1,27 @@ -import "../../faust.config"; import { WordPressBlocksProvider } from "@faustwp/blocks"; import { FaustProvider } from "@faustwp/core"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; +import "../../faust.config"; import "./global.css"; import Layout from "@/components/layout"; import "@faustwp/core/dist/css/toolbar.css"; +import * as gtag from "@/lib/gtag"; import blocks from "@/wp-blocks"; export default function MyApp({ Component, pageProps }) { + const router = useRouter(); + + // Record a Google Analytics pageview on route change + useEffect(() => { + const handleRouteChange = (url) => gtag.logPageview(url); + + router.events.on("routeChangeComplete", handleRouteChange); + return () => { + router.events.off("routeChangeComplete", handleRouteChange); + }; + }, [router.events]); + return ( {/* eslint-disable-next-line unicorn/no-null */} diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx index b798d342..671a6832 100644 --- a/src/pages/_document.jsx +++ b/src/pages/_document.jsx @@ -1,9 +1,28 @@ import { Html, Head, Main, NextScript } from "next/document"; +import { GA_TRACKING_ID } from "@/lib/gtag"; export default function Document() { return ( + {/* Global Site Tag (gtag.js) - Google Analytics */} +