feat(sidebar-filter): measure when user types in the filter

mdn · Apr 15, 2024 · c73fa75 · c73fa75
1 parent 52bda8f
commit c73fa75
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/client/src/document/organisms/sidebar/filter.tsx b/client/src/document/organisms/sidebar/filter.tsx
@@ -4,10 +4,14 @@ import { Button } from "../../../ui/atoms/button";
 
 import "./filter.scss";
 import { useGleanClick } from "../../../telemetry/glean-context";
-import { SIDEBAR_FILTER_FOCUS } from "../../../telemetry/constants";
+import {
+  SIDEBAR_FILTER_FOCUS,
+  SIDEBAR_FILTER_TYPED,
+} from "../../../telemetry/constants";
 
 export function SidebarFilter() {
   const [isActive, setActive] = useState<Boolean>(false);
+  const [hasTyped, setTyped] = useState<Boolean>(false);
   const { query, setQuery, matchCount } = useSidebarFilter();
   const gleanClick = useGleanClick();
 
@@ -17,6 +21,18 @@ export function SidebarFilter() {
     }
   }, [gleanClick, isActive]);
 
+  useEffect(() => {
+    if (hasTyped) {
+      gleanClick(SIDEBAR_FILTER_TYPED);
+    }
+  }, [gleanClick, hasTyped]);
+
+  useEffect(() => {
+    if (query) {
+      setTyped(true);
+    }
+  }, [query, setTyped]);
+
   return (
     <section className="sidebar-filter-container">
       <div className={`sidebar-filter ${query ? "has-input" : ""}`}>

diff --git a/client/src/telemetry/constants.ts b/client/src/telemetry/constants.ts
@@ -4,6 +4,7 @@ export const OFFER_OVERVIEW_CLICK = "offer_overview_click";
 export const SIDEBAR_CLICK = "sidebar_click";
 export const SIDEBAR_CLICK_WITH_FILTER = "sidebar_click_with_filter";
 export const SIDEBAR_FILTER_FOCUS = "sidebar_filter_focus";
+export const SIDEBAR_FILTER_TYPED = "sidebar_filter_typed";
 export const TOC_CLICK = "toc_click";
 /** Replaced "top_nav_already_subscriber" in July 2023. */
 export const TOP_NAV_LOGIN = "top_nav: login";