Add BACK_TO_TOP event and fire when button is clicked

frontend/src/components/VScrollButton.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue"
 
+import { useAnalytics } from "~/composables/use-analytics"
+import { useSearchStore } from "~/stores/search"
+import { useMediaStore } from "~/stores/media"
+
 const positionWithoutSidebar = "ltr:right-4 rtl:left-4"
 const positionWithSidebar = "ltr:right-[22rem] rtl:left-[22rem]"
 
@@ -9,15 +13,29 @@
   { isFilterSidebarVisible: true }
 )
 
+const { sendCustomEvent } = useAnalytics()
+const searchStore = useSearchStore()
+const mediaStore = useMediaStore()
+
 defineEmits<{ tab: [KeyboardEvent] }>()
 
 const hClass = computed(() =>
   props.isFilterSidebarVisible ? positionWithSidebar : positionWithoutSidebar
 )
-const scrollToTop = (e: MouseEvent) => {
-  const element =
-    (e.currentTarget as HTMLElement)?.closest("#main-page") || window
+const scrollToTop = (_: MouseEvent) => {
+  const mainPage = document.getElementById("main-page")
+  const element = mainPage || window
   element.scrollTo({ top: 0, left: 0, behavior: "smooth" })
+
+  sendCustomEvent("BACK_TO_TOP", {
+    query: searchStore.searchTerm,
+    page: mediaStore.currentPage,
+    scrollPixels: mainPage?.scrollTop || 0,
+    maxScroll:
+      mainPage && "scrollTopMax" in mainPage
+        ? (mainPage.scrollTopMax as number)
+        : 0,
+  })
 }
 </script>
 

frontend/src/types/analytics.ts

@@ -101,6 +101,20 @@
     /** The content type being searched (can include All content) */
     searchType: SearchType
   }
+  /**
+   * Description: The user clicks on the "back to top" caret button in the bottom-right of
+   * the search results page.
+   */
+  BACK_TO_TOP: {
+    /** The search query */
+    query: string
+    /** The current page of results the user is on. */
+    page: number
+    /** The number of pixels the user has scrolled. */
+    scrollPixels: number | undefined
+    /** The maximum number of pixels the user has scrolled on this pageload. */
+    maxScroll: number | undefined
+  }
   /**
    * Description: Whenever the user scrolls to the end of the results page.
    * Useful to evaluate how often users load more results or click