From 9c176c0f7b46193d22a98619279e95a5677447cb Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:18:05 +0100
Subject: [PATCH] chore(telemetry): measure top-level menu link clicks (#9938)

* refactor(main-menu): extract TopMenuLink

* chore(telemetry): measure top-level menu link clicks
---
 client/src/telemetry/constants.ts           |  1 +
 client/src/ui/molecules/main-menu/index.tsx | 43 ++++++++++++++-------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
index 8d06c7baa8c9..505463538c96 100644
--- a/client/src/telemetry/constants.ts
+++ b/client/src/telemetry/constants.ts
@@ -20,6 +20,7 @@ export const PLAYGROUND = "play_action";
 export const AI_EXPLAIN = "ai_explain";
 
 export const MENU = Object.freeze({
+  CLICK_LINK: "menu_click_link",
   CLICK_MENU: "menu_click_menu",
   CLICK_SUBMENU: "menu_click_submenu",
 });
diff --git a/client/src/ui/molecules/main-menu/index.tsx b/client/src/ui/molecules/main-menu/index.tsx
index a0e44062a0e3..6af28855a65e 100644
--- a/client/src/ui/molecules/main-menu/index.tsx
+++ b/client/src/ui/molecules/main-menu/index.tsx
@@ -7,6 +7,8 @@ import { PlusMenu } from "../plus-menu";
 import "./index.scss";
 import { PLUS_IS_ENABLED } from "../../../env";
 import { useLocale } from "../../../hooks";
+import { useGleanClick } from "../../../telemetry/glean-context";
+import { MENU } from "../../../telemetry/constants";
 
 export default function MainMenu({ isOpenOnMobile }) {
   const locale = useLocale();
@@ -79,22 +81,33 @@ export default function MainMenu({ isOpenOnMobile }) {
             toggleMenu={toggleMenu}
           />
         )}
-        <li className="top-level-entry-container">
-          <a className="top-level-entry menu-link" href="/en-US/blog/">
-            Blog
-          </a>
-        </li>
-        <li className="top-level-entry-container">
-          <a className="top-level-entry menu-link" href={`/${locale}/play`}>
-            Play
-          </a>
-        </li>
-        <li className="top-level-entry-container">
-          <a className="top-level-entry menu-link" href="/en-US/plus/ai-help/">
-            AI Help <sup className="new beta">Beta</sup>
-          </a>
-        </li>
+        <TopLevelMenuLink to="/en-US/blog/">Blog</TopLevelMenuLink>
+        <TopLevelMenuLink to={`/${locale}/play`}>Play</TopLevelMenuLink>
+        <TopLevelMenuLink to="/en-US/plus/ai-help/">
+          AI Help <sup className="new beta">Beta</sup>
+        </TopLevelMenuLink>
       </ul>
     </nav>
   );
 }
+
+function TopLevelMenuLink({
+  to,
+  children,
+}: {
+  to: string;
+  children: React.ReactNode;
+}) {
+  const gleanClick = useGleanClick();
+  return (
+    <li className="top-level-entry-container">
+      <a
+        className="top-level-entry menu-link"
+        href={to}
+        onClick={() => gleanClick(`${MENU.CLICK_LINK}: top-level -> ${to}`)}
+      >
+        {children}
+      </a>
+    </li>
+  );
+}