feat: track featured snaps

Author: ilayda-cp

static/js/public/featured-snaps.ts

@@ -1,4 +1,5 @@
 import declareGlobal from "../libs/declare";
+import { trackFeaturedSnapClicked } from "../store/utils/featuredTracker";
 
 type PackageData = {
   apps: Array<string>;
@@ -31,21 +32,26 @@ async function buildCards(category: string): Promise<void> {
     );
 
     featuredSnapCards.forEach((featuredSnapCard, index) => {
-      buildCard(featuredSnapCard, localData[index]);
+      buildCard(featuredSnapCard, localData[index], category, index);
     });
   } else {
     const response = await fetch(`/store/featured-snaps/${category}`);
     const data: Array<PackageData> = await response.json();
 
     featuredSnapCards.forEach((featuredSnapCard, index) => {
-      buildCard(featuredSnapCard, data[index]);
+      buildCard(featuredSnapCard, data[index], category, index);
     });
 
     window.sessionStorage.setItem(category, JSON.stringify(data));
   }
 }
 
-function buildCard(featuredSnapCard: Element, data: PackageData) {
+function buildCard(
+  featuredSnapCard: Element,
+  data: PackageData,
+  category: string,
+  index: number,
+) {
   const placeholder = featuredSnapCard.querySelector(
     "[data-js='featured-snap-card-placeholder']",
   ) as HTMLElement;
@@ -117,6 +123,16 @@ function buildCard(featuredSnapCard: Element, data: PackageData) {
     }
 
     content.appendChild(clone);
+
+    content.addEventListener("click", () => {
+      if (category === "featured") {
+        trackFeaturedSnapClicked(
+          data.package_name,
+          index + 1,
+          "home",
+        );
+      }
+    });
   }
 
   placeholder.classList.add("u-hide");

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

@@ -9,7 +9,7 @@ import {
 } from "@canonical/react-components";
 
 import { PackageFilter } from "../PackageFilter";
-import { trackSearchResultClicked } from "../../utils";
+import { trackSearchResultClicked, trackFeaturedSnapClicked } from "../../utils";
 
 import type { RefObject } from "react";
 import type { Category, Package, Packages } from "../../types";
@@ -143,6 +143,14 @@ function PackageList({
                             1,
                           packageData.package.name,
                         );
+                      } else if (isFeatured) {
+                        trackFeaturedSnapClicked(
+                          packageData.package.name,
+                          (parseInt(currentPage) - 1) * ITEMS_PER_PAGE +
+                            index +
+                            1,
+                          "store",
+                        );
                       }
                     }}
                   >

static/js/store/utils/featuredTracker.ts

@@ -0,0 +1,13 @@
+import { trackEvent } from "@canonical/analytics-events";
+
+export function trackFeaturedSnapClicked(
+  snapName: string,
+  position: number,
+  source: "home" | "store",
+): void {
+  trackEvent("snap_featured_snap_clicked", {
+    snap_name: snapName,
+    position,
+    source,
+  });
+}

static/js/store/utils/index.ts

@@ -8,3 +8,4 @@ export {
   trackSearchResults,
   trackSearchResultClicked,
 } from "./searchTracker";
+export { trackFeaturedSnapClicked } from "./featuredTracker";