add tracking to search flow (#5626)

* add tracking to search flow

* fix lint errors

* track page views

Author: ilayda-cp

package.json

@@ -25,7 +25,7 @@
     "@babel/preset-env": "7.29.0",
     "@babel/preset-react": "7.28.5",
     "@babel/preset-typescript": "7.28.5",
-    "@canonical/analytics-events": "1.0.4",
+    "@canonical/analytics-events": "1.0.5",
     "@canonical/cookie-policy": "3.8.4",
     "@canonical/global-nav": "3.8.0",
     "@canonical/react-components": "3.12.1",

static/js/public/homepage.ts

@@ -2,9 +2,36 @@ import { initFSFLanguageSelect } from "./fsf-language-select";
 import nps from "./nps";
 import initExpandableArea from "./expandable-area";
 import declareGlobal from "../libs/declare";
+import { trackEvent, trackPageView } from "@canonical/analytics-events";
+
+if (window.ANALYTICS_ENDPOINT) {
+  trackPageView("snap_home_page");
+}
+
+function initHomeSearchTracking(): void {
+  const form = document.querySelector(
+    "[data-js='home-search-form']",
+  ) as HTMLFormElement | null;
+
+  if (form) {
+    form.addEventListener("submit", () => {
+      const input = form.querySelector("input[name='q']") as HTMLInputElement;
+      if (input?.value) {
+        const searchId = crypto.randomUUID();
+        sessionStorage.setItem("search_id", searchId);
+
+        trackEvent("snap_home_search_submitted", {
+          search_id: searchId,
+          query: input.value,
+        });
+      }
+    });
+  }
+}
 
 declareGlobal("snapcraft.public.homepage", {
   initExpandableArea,
   initFSFLanguageSelect,
+  initHomeSearchTracking,
   nps,
 });

static/js/store/components/PackageList/PackageList.tsx

@@ -7,6 +7,7 @@ import {
   Row,
   Strip,
 } from "@canonical/react-components";
+import { trackEvent } from "@canonical/analytics-events";
 
 import { PackageFilter } from "../PackageFilter";
 
@@ -127,11 +128,26 @@ function PackageList({
                 ))}
               {!isFetching &&
                 data &&
-                data.packages.map((packageData: Package) => (
+                data.packages.map((packageData: Package, index: number) => (
                   <Col
                     size={3}
                     style={{ marginBottom: "1.5rem" }}
                     key={packageData.id}
+                    onClick={() => {
+                      const query = searchParams.get("q");
+                      if (query) {
+                        const searchId =
+                          sessionStorage.getItem("search_id") || "";
+                        trackEvent("snap_store_search_result_clicked", {
+                          search_id: searchId,
+                          query,
+                          position:
+                            (parseInt(currentPage) - 1) * ITEMS_PER_PAGE +
+                            index +
+                            1,
+                        });
+                      }
+                    }}
                   >
                     <DefaultCard data={packageData} />
                   </Col>

static/js/store/components/SearchInput/SearchInput.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@canonical/react-components";
+import { trackEvent } from "@canonical/analytics-events";
 import { useSearchParams, useNavigate, useLocation } from "react-router-dom";
 
 import type { RefObject } from "react";
@@ -27,6 +28,14 @@ export const SearchInput = ({
       searchParams.delete("page");
       searchParams.set("q", searchRef.current.value);
       setSearchParams(searchParams);
+
+      const searchId = crypto.randomUUID();
+      sessionStorage.setItem("search_id", searchId);
+
+      trackEvent("snap_store_search_submitted", {
+        search_id: searchId,
+        query: searchRef.current.value,
+      });
     }
     if (searchSummaryRef && searchSummaryRef.current) {
       searchSummaryRef.current.scrollIntoView({

static/js/store/index.tsx

@@ -1,10 +1,15 @@
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "react-query";
+import { trackPageView } from "@canonical/analytics-events";
 
 import Root from "./layouts/Root";
 import Store from "./pages/Store";
 
+if (window.ANALYTICS_ENDPOINT) {
+  trackPageView("snap_store_page");
+}
+
 const router = createBrowserRouter([
   {
     path: "/",

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

@@ -1,5 +1,6 @@
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { useLocation, useSearchParams } from "react-router-dom";
+import { trackEvent } from "@canonical/analytics-events";
 
 import Banner from "../../components/Banner";
 import PackageList from "../../components/PackageList/PackageList";
@@ -30,6 +31,38 @@ function Store(): React.JSX.Element {
   const packagesCount = data?.packages ? data?.packages.length : 0;
   const isResultExist = status === "success" && packagesCount > 0;
 
+  useEffect(() => {
+    if (searchTerm && status === "success" && !isFetching) {
+      let searchId = sessionStorage.getItem("search_id");
+      if (!searchId) {
+        searchId = crypto.randomUUID();
+        sessionStorage.setItem("search_id", searchId);
+      }
+
+      if (packagesCount > 0) {
+        trackEvent("snap_store_search_results_loaded", {
+          search_id: searchId,
+          query: searchTerm,
+          total_items: data?.total_items ?? 0,
+          page: currentPage,
+        });
+      } else {
+        trackEvent("snap_store_search_no_results", {
+          search_id: searchId,
+          query: searchTerm,
+        });
+      }
+    }
+  }, [
+    searchTerm,
+    status,
+    currentPage,
+    searchParams,
+    packagesCount,
+    data,
+    isFetching,
+  ]);
+
   const searchRef = useRef<HTMLInputElement | null>(null);
   const searchSummaryRef = useRef<HTMLDivElement>(null);
 

templates/home/_featured-snaps.html

@@ -5,7 +5,7 @@
         <div class="p-block">
           <h1>The app store for Linux</h1>
         </div>
-        <form class="p-search-box" action="/store">
+        <form class="p-search-box" action="/store" data-js="home-search-form">
           <label class="u-off-screen" for="search">Search</label>
           <input type="search" id="search" class="p-search-box__input" name="q" placeholder="Search thousands of snaps" required="" autocomplete="on">
           <button type="reset" class="p-search-box__reset"><i class="p-icon--close">Close</i></button>

templates/index.html

@@ -183,6 +183,10 @@ <h2>Measure user growth</h2>
       Sentry.captureException(e);
     }
 
+    try {
+      snapcraft.public.homepage.initHomeSearchTracking();
+    } catch(e) {}
+
     try {
       snapcraft.public.featuredSnaps.init({{ featured_categories|safe }});
     } catch(e) {

yarn.lock

@@ -924,10 +924,10 @@
     hashery "^1.5.0"
     keyv "^5.6.0"
 
-"@canonical/analytics-events@1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@canonical/analytics-events/-/analytics-events-1.0.4.tgz#27440161a7970f2f2a990dd0597e70685706c3b4"
-  integrity sha512-+ChQJHpwpBQxuSdVwNv1YSGSzX6z6QeCmfxKqo8K02Hk2nJGuIdwEfi4yIa/KxVOhxaFLO7fy7ACSsBkTGeGRA==
+"@canonical/analytics-events@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@canonical/analytics-events/-/analytics-events-1.0.5.tgz#88a18381a657196ea5f21b5932a41c5afce69999"
+  integrity sha512-GMFbPJ83FcN+ItLcc1czYp0HUA96uLfu+35B0NWEVCL/Wy/CRc0o8Ab1DgAyjBw16reIP+SkAg9k/NBwNj1Tjg==
 
 "@canonical/cookie-policy@3.8.4":
   version "3.8.4"