Tracking events for icon library (#2167)

Co-authored-by: Brian Runnells <1672302+Dhaulagiri@users.noreply.github.com>

website/app/modifiers/doc-track-event.js

@@ -9,15 +9,12 @@ import { inject as service } from '@ember/service';
 import { assert } from '@ember/debug';
 
 export default class DocTrackEvent extends Modifier {
-  @service fastboot;
+  @service eventTracking;
 
   modify(element, _positional, named) {
-    if (
-      // Only attempt to do something if we are in the right environment
-      this.fastboot.isFastBoot ||
-      window.fathom == null
-    ) {
-      // comment this line if you want to test in your local environment
+    // if the tracking is disabled, do not add the event listener
+    if (!this.eventTracking.isEnabled) {
+      // comment this line if you want the tracking function in the `eventTracking` service to be called even if the tracking is disabled
       return;
     }
 
@@ -29,8 +26,7 @@ export default class DocTrackEvent extends Modifier {
     );
 
     const handleTriggerEvent = () => {
-      // https://usefathom.com/docs/features/events
-      window.fathom?.trackEvent(eventName);
+      this.eventTracking.trackEvent(eventName);
     };
 
     element.addEventListener(triggerEvent, handleTriggerEvent);

website/app/services/event-tracking.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Service from '@ember/service';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class EventService extends Service {
+  @service fastboot;
+
+  // Only attempt to do something if we are in the right environment
+  isEnabled = !this.fastboot.isFastBoot && window.fathom;
+
+  @action
+  trackEvent(eventName) {
+    if (this.isEnabled && eventName != null) {
+      // https://usefathom.com/docs/features/events
+      window.fathom.trackEvent(eventName);
+    }
+  }
+}

website/docs/icons/library/index.js

@@ -11,8 +11,10 @@ import { inject as service } from '@ember/service';
 import catalog from '@hashicorp/flight-icons/catalog.json';
 
 const DEBOUNCE_MS = 250;
+const TRACKING_DEBOUNCE_MS = 1000;
 
 export default class Index extends Component {
+  @service eventTracking;
   @service router;
 
   allIcons = catalog.assets.map(
@@ -116,27 +118,47 @@ export default class Index extends Component {
 
   @action
   selectGroupType(event) {
+    const { value: selectedGroupType } = event.target;
+
     this.router.transitionTo({
       queryParams: {
+        selectedGroupType,
         searchQuery: this.searchQuery,
         selectedIconSize: this.selectedIconSize,
-        selectedGroupType: event.target.value,
       },
     });
+
+    this.eventTracking.trackEvent(
+      `Icon Library - Group by Selector - ${selectedGroupType}`
+    );
   }
 
   @action
   selectIconSize(event) {
+    const { value: selectedIconSize } = event.target;
+
     this.router.transitionTo({
       queryParams: {
+        selectedIconSize,
         searchQuery: this.searchQuery,
         selectedGroupType: this.selectedGroupType,
-        selectedIconSize: event.target.value,
       },
     });
+
+    this.eventTracking.trackEvent(
+      `Icon Library - Size Selector - ${selectedIconSize}`
+    );
+  }
+
+  @restartableTask *trackSearchIcons(searchQuery) {
+    yield timeout(TRACKING_DEBOUNCE_MS);
+
+    this.eventTracking.trackEvent(`Icon Library - Search - ${searchQuery}`);
   }
 
   @restartableTask *searchIcons(searchQuery) {
+    this.trackSearchIcons.perform(searchQuery);
+
     yield timeout(DEBOUNCE_MS);
 
     this.router.transitionTo({