From 57c1a6edd59d1d5f91f080e452ea4401b5ee99ae Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 3 Jul 2024 12:27:20 +0300
Subject: [PATCH] feat: track interaction with search (#7526)

Now we will start tracking how users interact with search box. Whether
they open it manually or use CTRL K
---
 .../src/component/common/Search/Search.tsx    | 25 +++++++++++++++++++
 frontend/src/hooks/usePlausibleTracker.ts     |  3 ++-
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/frontend/src/component/common/Search/Search.tsx b/frontend/src/component/common/Search/Search.tsx
index a303dd35a1..67c5944312 100644
--- a/frontend/src/component/common/Search/Search.tsx
+++ b/frontend/src/component/common/Search/Search.tsx
@@ -20,6 +20,7 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside';
 import { useSavedQuery } from './useSavedQuery';
 import { useOnBlur } from 'hooks/useOnBlur';
 import { SearchHistory } from './SearchSuggestions/SearchHistory';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface ISearchProps {
     id?: string;
@@ -110,9 +111,11 @@ export const Search = ({
     debounceTime = 200,
     ...rest
 }: ISearchProps) => {
+    const { trackEvent } = usePlausibleTracker();
     const searchInputRef = useRef<HTMLInputElement>(null);
     const searchContainerRef = useRef<HTMLInputElement>(null);
     const [showSuggestions, setShowSuggestions] = useState(false);
+    const [usedHotkey, setUsedHotkey] = useState(false);
     const hideSuggestions = () => {
         setShowSuggestions(false);
         onBlur?.();
@@ -136,6 +139,7 @@ export const Search = ({
             preventDefault: true,
         },
         () => {
+            setUsedHotkey(true);
             if (document.activeElement === searchInputRef.current) {
                 searchInputRef.current?.blur();
             } else {
@@ -143,6 +147,27 @@ export const Search = ({
             }
         },
     );
+
+    useEffect(() => {
+        if (!showSuggestions) {
+            return;
+        }
+        if (usedHotkey) {
+            trackEvent('search-opened', {
+                props: {
+                    eventType: 'hotkey',
+                },
+            });
+        } else {
+            trackEvent('search-opened', {
+                props: {
+                    eventType: 'manual',
+                },
+            });
+        }
+        setUsedHotkey(false);
+    }, [showSuggestions]);
+
     useKeyboardShortcut({ key: 'Escape' }, () => {
         if (searchContainerRef.current?.contains(document.activeElement)) {
             searchInputRef.current?.blur();
diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts
index 3e70d7b36a..1ef083ab08 100644
--- a/frontend/src/hooks/usePlausibleTracker.ts
+++ b/frontend/src/hooks/usePlausibleTracker.ts
@@ -64,7 +64,8 @@ export type CustomEvents =
     | 'feature-lifecycle'
     | 'command-bar'
     | 'new-in-unleash-click'
-    | 'new-in-unleash-dismiss';
+    | 'new-in-unleash-dismiss'
+    | 'search-opened';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);