fix(analytics): decouple search tracking and fix false no-results events

Author: ilayda-cp

static/js/store/pages/Store/Store.tsx

@@ -6,7 +6,7 @@ import PackageList from "../../components/PackageList/PackageList";
 import EmptyResultSection from "../../components/EmptyResultSection";
 
 import { usePackages } from "../../hooks";
-import { trackSearchResults } from "../../utils";
+import { getSearchId, trackSearchResults } from "../../utils";
 
 function Store(): React.JSX.Element {
   const { search } = useLocation();
@@ -36,7 +36,8 @@ function Store(): React.JSX.Element {
   useEffect(() => {
     if (!searchTerm || status !== "success" || isFetching) return;
 
-    const trackingKey = `${searchTerm}-${currentPage}`;
+    const searchId = getSearchId();
+    const trackingKey = `${searchId}-${searchTerm}-${currentPage}`;
     if (lastTrackedKey.current === trackingKey) return;
     lastTrackedKey.current = trackingKey;
 

static/js/store/utils/index.ts

@@ -3,6 +3,7 @@ import getCategoryOrder from "./getCategoryOrder";
 
 export { getArchitectures, getCategoryOrder };
 export {
+  getSearchId,
   trackSearchSubmitted,
   trackSearchResults,
   trackSearchResultClicked,

static/js/store/utils/searchTracker.ts

@@ -2,47 +2,36 @@ import { trackEvent } from "@canonical/analytics-events";
 
 const SEARCH_ID_KEY = "search_id";
 
-let activeSearchId = "";
-
-function generateSearchId(): string {
-  const id = crypto.randomUUID();
-  sessionStorage.setItem(SEARCH_ID_KEY, id);
-  activeSearchId = id;
-  return id;
-}
-
-function getOrCreateSearchId(): string {
-  if (activeSearchId) return activeSearchId;
-
-  const stored = sessionStorage.getItem(SEARCH_ID_KEY);
-  if (stored) {
-    activeSearchId = stored;
-    return stored;
+export function getSearchId(): string {
+  let id = sessionStorage.getItem(SEARCH_ID_KEY);
+  if (!id) {
+    id = crypto.randomUUID();
+    sessionStorage.setItem(SEARCH_ID_KEY, id);
   }
-
-  return generateSearchId();
+  return id;
 }
 
 export function trackSearchSubmitted(
   source: "home" | "store",
   query: string,
 ): void {
-  const searchId = generateSearchId();
-  const target =
+  const searchId = crypto.randomUUID();
+  sessionStorage.setItem(SEARCH_ID_KEY, searchId);
+
+  trackEvent(
     source === "home"
       ? "snap_home_search_submitted"
-      : "snap_store_search_submitted";
-
-  trackEvent(target, { search_id: searchId, query });
+      : "snap_store_search_submitted",
+    { search_id: searchId, query },
+  );
 }
 
 export function trackSearchResults(
   query: string,
   totalItems: number,
   page: number,
 ): void {
-  const searchId = getOrCreateSearchId();
-  if (!searchId) return;
+  const searchId = getSearchId();
 
   if (totalItems > 0) {
     trackEvent("snap_store_search_results_loaded", {
@@ -63,11 +52,8 @@ export function trackSearchResultClicked(
   query: string,
   position: number,
 ): void {
-  const searchId = getOrCreateSearchId();
-  if (!searchId) return;
-
   trackEvent("snap_store_search_result_clicked", {
-    search_id: searchId,
+    search_id: getSearchId(),
     query,
     position,
   });