chore(telemetry): measure theme switcher clicks (#10698)

* chore(telemetry): measure theme switcher clicks * fixup! chore(telemetry): measure theme switcher clicks
mdn · Mar 14, 2024 · c584cb6 · c584cb6
1 parent 2c27a78
commit c584cb6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
@@ -78,3 +78,4 @@ export const BASELINE = Object.freeze({
 
 export const CLIENT_SIDE_NAVIGATION = "client_side_nav";
 export const LANGUAGE = "language";
+export const THEME_SWITCHER = "theme_switcher";
diff --git a/client/src/ui/molecules/theme-switcher/index.tsx b/client/src/ui/molecules/theme-switcher/index.tsx
@@ -9,6 +9,8 @@ import "./index.scss";
 import { switchTheme } from "../../../utils";
 import { Theme } from "../../../types/theme";
 import { useUIStatus } from "../../../ui-context";
+import { useGleanClick } from "../../../telemetry/glean-context";
+import { THEME_SWITCHER } from "../../../telemetry/constants";
 
 type ThemeButton = {
   id: Theme;
@@ -19,6 +21,7 @@ export const ThemeSwitcher = () => {
   const menuId = "themes-menu";
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
+  const gleanClick = useGleanClick();
   const { setColorScheme } = useUIStatus();
   const [activeTheme, setActiveTheme] = React.useState<Theme>("os-default");
 
@@ -30,6 +33,7 @@ export const ThemeSwitcher = () => {
         `}
         icon={`theme-${id}`}
         onClickHandler={() => {
+          gleanClick(`${THEME_SWITCHER}: switch -> ${id}`);
           setColorScheme(id);
           switchTheme(id, setActiveTheme);
           setIsOpen(false);
@@ -74,6 +78,7 @@ export const ThemeSwitcher = () => {
         icon={`theme-${activeTheme}`}
         extraClasses="theme-switcher-menu small"
         onClickHandler={() => {
+          gleanClick(`${THEME_SWITCHER}: ${isOpen ? "close" : "open"}`);
           setIsOpen(!isOpen);
         }}
       >