chore(telemetry): measure top-level menu link clicks (#9938)

* refactor(main-menu): extract TopMenuLink * chore(telemetry): measure top-level menu link clicks
mdn · Nov 3, 2023 · 9c176c0 · 9c176c0
1 parent ee8a59d
commit 9c176c0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 15 deletions.
diff --git 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
@@ -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>
+  );
+}