diff --git a/package.json b/package.json
index c4df3b5b..6c302d84 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
 		"@heroicons/react": "^2.2.0",
 		"@icons-pack/react-simple-icons": "^13.1.0",
 		"@jsdevtools/rehype-url-inspector": "^2.0.2",
+		"@next/third-parties": "^15.3.4",
 		"@octokit/core": "^7.0.2",
 		"@shikijs/transformers": "^3.6.0",
 		"@sindresorhus/slugify": "^2.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d67522a..6dea7224 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       '@jsdevtools/rehype-url-inspector':
         specifier: ^2.0.2
         version: 2.0.2
+      '@next/third-parties':
+        specifier: ^15.3.4
+        version: 15.3.4(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)
       '@octokit/core':
         specifier: ^7.0.2
         version: 7.0.2
@@ -677,6 +680,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@next/third-parties@15.3.4':
+    resolution: {integrity: sha512-jOvAsd0Yoq/eZ3/M+X/y/539/M6Up2xPE/aOr23CGXKinhfK2kscGP4uhtwlS0FZyHvU7ud9HTTt7G3D5G5BkA==}
+    peerDependencies:
+      next: ^13.0.0 || ^14.0.0 || ^15.0.0
+      react: ^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0
+
   '@nodelib/fs.scandir@2.1.5':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -4241,6 +4250,9 @@ packages:
   text-decoder@1.2.3:
     resolution: {integrity: sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==}
 
+  third-party-capital@1.0.20:
+    resolution: {integrity: sha512-oB7yIimd8SuGptespDAZnNkzIz+NWaJCu2RMsbs4Wmp9zSDUM8Nhi3s2OOcqYuv3mN4hitXc8DVx+LyUmbUDiA==}
+
   tinyglobby@0.2.14:
     resolution: {integrity: sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==}
     engines: {node: '>=12.0.0'}
@@ -5145,6 +5157,12 @@ snapshots:
   '@next/swc-win32-x64-msvc@15.3.3':
     optional: true
 
+  '@next/third-parties@15.3.4(next@15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      next: 15.3.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      third-party-capital: 1.0.20
+
   '@nodelib/fs.scandir@2.1.5':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -9587,6 +9605,8 @@ snapshots:
     dependencies:
       b4a: 1.6.7
 
+  third-party-capital@1.0.20: {}
+
   tinyglobby@0.2.14:
     dependencies:
       fdir: 6.4.6(picomatch@4.0.2)
diff --git a/src/components/docs-breadcrumbs.jsx b/src/components/docs-breadcrumbs.jsx
index d881e4e8..1da32435 100644
--- a/src/components/docs-breadcrumbs.jsx
+++ b/src/components/docs-breadcrumbs.jsx
@@ -1,6 +1,7 @@
 import { ChevronRightIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 import Link from "@/components/link";
+import { sendSelectItemEvent } from "@/lib/analytics.mjs";
 import { normalizeHref } from "@/utils/strings";
 
 export default function DocsBreadcrumbs({ routes }) {
@@ -59,6 +60,16 @@ export default function DocsBreadcrumbs({ routes }) {
 							href={breadcrumb.route}
 							noDefaultStyles
 							aria-label={breadcrumb.title}
+							onClick={() => {
+								sendSelectItemEvent({
+									list: { id: "docs_breadcrumbs", name: "Docs Breadcrumbs" },
+									item: {
+										item_id: breadcrumb.route,
+										item_name: breadcrumb.title,
+										item_category: "mdx_doc",
+									},
+								});
+							}}
 						>
 							<span>{breadcrumb.title}</span>
 							<span>
diff --git a/src/components/docs-nav.jsx b/src/components/docs-nav.jsx
index 2338b022..47e0bfd3 100644
--- a/src/components/docs-nav.jsx
+++ b/src/components/docs-nav.jsx
@@ -1,5 +1,6 @@
 import { CloseButton } from "@headlessui/react";
 import Link from "@/components/link";
+import { sendSelectItemEvent } from "@/lib/analytics.mjs";
 import { normalizeHref, classNames } from "@/utils/strings";
 
 export default function DocsNav({
@@ -42,6 +43,19 @@ function NavItem({ item, level, isMobileMenu, ...props }) {
 				href={normalizeHref(item.route)}
 				noDefaultStyles
 				activeClassName="text-blue-500 active"
+				onClick={() => {
+					sendSelectItemEvent({
+						list: {
+							id: isMobileMenu ? "mobile_docs_nav" : "docs_nav",
+							name: isMobileMenu ? "Mobile Docs Nav" : "Docs Nav",
+						},
+						item: {
+							item_id: item.route,
+							item_name: item.title,
+							item_category: "mdx_doc",
+						},
+					});
+				}}
 				{...props}
 			>
 				{item.title}
diff --git a/src/components/primary-nav.jsx b/src/components/primary-nav.jsx
index 3060dfc4..00e6e5ee 100644
--- a/src/components/primary-nav.jsx
+++ b/src/components/primary-nav.jsx
@@ -7,6 +7,7 @@ import {
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import { forwardRef } from "react";
 import Link from "@/components/link";
+import { sendSelectItemEvent } from "@/lib/analytics.mjs";
 import { classNames } from "@/utils/strings";
 
 const navItemClass =
@@ -20,6 +21,16 @@ const CustomLink = forwardRef((props, reference) => {
 	);
 });
 
+const sendMainNavItemSelectEvent = (item) => {
+	sendSelectItemEvent({
+		list: {
+			id: "main_nav",
+			name: "Main Nav",
+		},
+		item,
+	});
+};
+
 export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 	return (
 		<nav className={classNames("flex items-center space-x-4", className)}>
@@ -30,6 +41,13 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 						href="/docs/"
 						noDefaultStyles
 						activeClassName="text-purple-500"
+						onClick={() =>
+							sendMainNavItemSelectEvent({
+								item_id: "/docs/",
+								item_name: "Docs",
+								item_category: "mdx_doc",
+							})
+						}
 					>
 						Docs
 					</Link>
@@ -40,6 +58,13 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 						href="/blog/"
 						noDefaultStyles
 						activeClassName="text-purple-500"
+						onClick={() =>
+							sendMainNavItemSelectEvent({
+								item_id: "/blog/",
+								item_name: "Blog",
+								item_category: "post",
+							})
+						}
 					>
 						Blog
 					</Link>
@@ -50,6 +75,13 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 						href="/showcase/"
 						noDefaultStyles
 						activeClassName="text-purple-500"
+						onClick={() =>
+							sendMainNavItemSelectEvent({
+								item_id: "/showcase/",
+								item_name: "Showcase",
+								item_category: "page",
+							})
+						}
 					>
 						Showcase
 					</Link>
@@ -78,6 +110,13 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 						noDefaultStyles
 						href="/docs/"
 						activeClassName="text-purple-500"
+						onClick={() =>
+							sendMainNavItemSelectEvent({
+								item_id: "/docs/",
+								item_name: "Docs",
+								item_category: "mdx_doc",
+							})
+						}
 					>
 						Docs
 					</CustomLink>
@@ -87,6 +126,13 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 						noDefaultStyles
 						href="/blog/"
 						activeClassName="text-purple-500"
+						onClick={() =>
+							sendMainNavItemSelectEvent({
+								item_id: "/blog/",
+								item_name: "Blog",
+								item_category: "post",
+							})
+						}
 					>
 						Blog
 					</CustomLink>
@@ -96,6 +142,13 @@ export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
 						noDefaultStyles
 						href="/showcase/"
 						activeClassName="text-purple-500"
+						onClick={() =>
+							sendMainNavItemSelectEvent({
+								item_id: "/showcase/",
+								item_name: "Showcase",
+								item_category: "page",
+							})
+						}
 					>
 						Showcase
 					</CustomLink>
diff --git a/src/components/search-bar.jsx b/src/components/search-bar.jsx
index b320bfec..b3408df3 100644
--- a/src/components/search-bar.jsx
+++ b/src/components/search-bar.jsx
@@ -3,6 +3,7 @@ import { useCombobox } from "downshift";
 import debounce from "lodash.debounce";
 import { useRouter } from "next/router";
 import { useState, useEffect, useRef, useCallback } from "react";
+import { sendSearchEvent, sendSelectItemEvent } from "@/lib/analytics.mjs";
 
 export default function SearchBar({ setIsSearchOpen }) {
 	const [items, setItems] = useState([]);
@@ -85,6 +86,8 @@ export default function SearchBar({ setIsSearchOpen }) {
 			} catch (error) {
 				console.error("Error fetching search results:", error);
 				setItems([]);
+			} finally {
+				sendSearchEvent(value);
 			}
 		}, 500),
 	).current;
@@ -203,11 +206,33 @@ export default function SearchBar({ setIsSearchOpen }) {
 												index,
 												onClick: () => {
 													closeModal();
+													sendSelectItemEvent({
+														list: {
+															id: "search_results",
+															name: "Search Results",
+														},
+														item: {
+															item_id: item.path,
+															item_name: item.title,
+															item_category: item.type,
+														},
+													});
 													router.push(item.path);
 												},
 												onKeyDown: (event) => {
 													if (event.key === "Enter") {
 														closeModal();
+														sendSelectItemEvent({
+															list: {
+																id: "search_results",
+																name: "Search Results",
+															},
+															item: {
+																item_id: item.path,
+																item_name: item.title,
+																item_category: item.type,
+															},
+														});
 														router.push(item.path);
 													}
 												},
diff --git a/src/lib/analytics.mjs b/src/lib/analytics.mjs
new file mode 100644
index 00000000..e9f4d0bb
--- /dev/null
+++ b/src/lib/analytics.mjs
@@ -0,0 +1,15 @@
+import { sendGAEvent } from "@next/third-parties/google";
+
+export function sendSearchEvent(term) {
+	sendGAEvent("event", "search", {
+		search_term: term,
+	});
+}
+
+export function sendSelectItemEvent({ list: { name, id }, item }) {
+	sendGAEvent("event", "select_item", {
+		item_list_id: id,
+		item_list_name: name,
+		item: [item],
+	});
+}
diff --git a/src/lib/gtag.js b/src/lib/gtag.js
deleted file mode 100644
index 4f66ef29..00000000
--- a/src/lib/gtag.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import process from "process"; // eslint-disable-line unicorn/prefer-node-protocol
-
-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) => {
-	globalThis.gtag("config", GA_TRACKING_ID, {
-		page_path: url,
-	});
-};
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx
index fc3cb0ec..27a5774f 100644
--- a/src/pages/_app.jsx
+++ b/src/pages/_app.jsx
@@ -1,31 +1,25 @@
+/* eslint-disable n/prefer-global/process */
+/* eslint-disable no-restricted-globals */
 import { WordPressBlocksProvider } from "@faustwp/blocks";
 import { FaustProvider } from "@faustwp/core";
+import { GoogleAnalytics } from "@next/third-parties/google";
 import { useRouter } from "next/router";
-import { useEffect } from "react";
 import DocsLayout from "@/components/docs-layout";
 import Layout from "@/components/layout";
-import { logPageview } from "@/lib/gtag.js";
 import blocks from "@/wp-blocks";
 import "../../faust.config";
 import "./global.css";
 import "@faustwp/core/dist/css/toolbar.css";
 
+const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID;
+
 export default function MyApp({ Component, pageProps }) {
 	const router = useRouter();
 	const isDocsRoute = router.pathname.startsWith("/docs");
 
-	// Record a Google Analytics pageview on route change
-	useEffect(() => {
-		const handleRouteChange = (url) => logPageview(url);
-
-		router.events.on("routeChangeComplete", handleRouteChange);
-		return () => {
-			router.events.off("routeChangeComplete", handleRouteChange);
-		};
-	}, [router.events]);
-
 	return (
 		<FaustProvider pageProps={pageProps}>
+			<GoogleAnalytics gaId={GA_TRACKING_ID} />
 			{/*  eslint-disable-next-line unicorn/no-null */}
 			<WordPressBlocksProvider config={{ blocks, theme: null }}>
 				<Layout>
diff --git a/src/pages/_document.jsx b/src/pages/_document.jsx
index 87d8bd7c..4010cede 100644
--- a/src/pages/_document.jsx
+++ b/src/pages/_document.jsx
@@ -1,7 +1,6 @@
 import { env } from "node:process";
 import { URL } from "node:url";
 import { Html, Head, Main, NextScript } from "next/document";
-import { GA_TRACKING_ID } from "@/lib/gtag";
 
 const SITE_URL = env.NEXT_PUBLIC_SITE_URL;
 
@@ -9,24 +8,6 @@ export default function Document() {
 	return (
 		<Html lang="en">
 			<Head>
-				{/* Global Site Tag (gtag.js) - Google Analytics */}
-				<script
-					async
-					src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
-				/>
-				<script
-					// eslint-disable-next-line react/no-danger
-					dangerouslySetInnerHTML={{
-						__html: `
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-            gtag('config', '${GA_TRACKING_ID}', {
-              page_path: window.location.pathname,
-            });
-          `,
-					}}
-				/>
 				<link href="/images/favicon-32x32.png" rel="icon" sizes="32x32" />
 				<link href="/images/favicon-192x192.png" rel="icon" sizes="192x192" />
 				<link