chore(telemetry): measure menu clicks (#9918)

* chore(telemetry): measure Menu/Submenu clicks * chore(glean): record menu/submenu id * refactor(user-menu): change ID to "user-menu" * fixup! chore(glean): record menu/submenu id * Revert "refactor(user-menu): change ID to "user-menu"" This reverts commit 9184fa9.
mdn · Oct 31, 2023 · c4c5d79 · c4c5d79
1 parent 9867d52
commit c4c5d79
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
@@ -19,6 +19,11 @@ export const BANNER_AI_HELP_CLICK = "banner_ai_help_click";
 export const PLAYGROUND = "play_action";
 export const AI_EXPLAIN = "ai_explain";
 
+export const MENU = Object.freeze({
+  CLICK_MENU: "menu_click_menu",
+  CLICK_SUBMENU: "menu_click_submenu",
+});
+
 export const PLUS_COLLECTIONS = Object.freeze({
   ACTIONS_NOTE_ADD: "collections_actions_note_add",
   ACTIONS_NOTE_EDIT: "collections_actions_note_edit",

diff --git a/client/src/ui/molecules/menu/index.tsx b/client/src/ui/molecules/menu/index.tsx
@@ -1,3 +1,5 @@
+import { MENU } from "../../../telemetry/constants";
+import { useGleanClick } from "../../../telemetry/glean-context";
 import { MenuEntry, Submenu } from "../submenu";
 import "./index.scss";
 
@@ -8,6 +10,8 @@ interface MenuProps {
 }
 
 export const Menu = ({ menu, isOpen, toggle }: MenuProps) => {
+  const gleanClick = useGleanClick();
+
   const buttonId = `${menu.id}-button`;
   const submenuId = `${menu.id}-menu`;
 
@@ -35,8 +39,11 @@ export const Menu = ({ menu, isOpen, toggle }: MenuProps) => {
         <a
           href={menu.to}
           className="top-level-entry"
-          // @ts-ignore
-          onClick={() => document?.activeElement?.blur()}
+          onClick={() => {
+            gleanClick(`${MENU.CLICK_MENU}: ${menu.id} -> ${menu.to}`);
+            // @ts-ignore
+            document?.activeElement?.blur();
+          }}
         >
           {menu.label}
         </a>

diff --git a/client/src/ui/molecules/submenu/index.tsx b/client/src/ui/molecules/submenu/index.tsx
@@ -1,3 +1,5 @@
+import { MENU } from "../../../telemetry/constants";
+import { useGleanClick } from "../../../telemetry/glean-context";
 import "./index.scss";
 
 export type SubmenuItem = {
@@ -32,6 +34,7 @@ export const Submenu = ({
   submenuId?: string;
   extraClasses?: string;
 }) => {
+  const gleanClick = useGleanClick();
   return (
     <ul
       id={submenuId}
@@ -58,6 +61,11 @@ export const Submenu = ({
                   className={`submenu-item ${
                     item.url.startsWith("https://") ? "external" : ""
                   }`}
+                  onClick={() =>
+                    gleanClick(
+                      `${MENU.CLICK_SUBMENU}: ${menuEntry.id} -> ${item.url}`
+                    )
+                  }
                 >
                   {item.hasIcon && <div className={item.iconClasses} />}
                   {item.dot && (