Merge pull request #340 from wpengine/analytics-events

Analytics events

Author: moonmeister

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",

pnpm-lock.yaml

@@ -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>

src/components/docs-breadcrumbs.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}

src/components/docs-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>

src/components/primary-nav.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);
 													}
 												},

src/components/search-bar.jsx

@@ -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],
+	});
+}

src/lib/analytics.mjs

@@ -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>

src/lib/gtag.js

@@ -1,32 +1,13 @@
 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;
 
 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