Add TOGGLE_FILTER_SIDEBAR analytics event (#2405)

WordPress · Jun 27, 2023 · 233580d · 233580d
1 parent 3864283
commit 233580d
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 3 deletions.
diff --git a/frontend/src/components/VHeader/VHeaderDesktop.vue b/frontend/src/components/VHeader/VHeaderDesktop.vue
@@ -65,6 +65,8 @@ import VLogoButton from "~/components/VHeader/VLogoButton.vue"
 import VSearchBarButton from "~/components/VHeader/VHeaderMobile/VSearchBarButton.vue"
 import VSearchTypePopover from "~/components/VContentSwitcher/VSearchTypePopover.vue"
 
+import type { Ref } from "vue"
+
 /**
  * The desktop search header.
  */
@@ -85,8 +87,8 @@ export default defineComponent({
     const searchStore = useSearchStore()
     const uiStore = useUiStore()
 
-    const isHeaderScrolled = inject(IsHeaderScrolledKey)
-    const isSidebarVisible = inject(IsSidebarVisibleKey)
+    const isHeaderScrolled = inject<Ref<boolean>>(IsHeaderScrolledKey)
+    const isSidebarVisible = inject<Ref<boolean>>(IsSidebarVisibleKey)
 
     const isFetching = computed(() => mediaStore.fetchState.isFetching)
 
@@ -106,11 +108,19 @@ export default defineComponent({
       document.activeElement?.blur()
       updateSearchState()
     }
+
     const areFiltersDisabled = computed(
       () => !searchStore.searchTypeIsSupported
     )
 
-    const toggleSidebar = () => uiStore.toggleFilters()
+    const toggleSidebar = () => {
+      const toState = isSidebarVisible?.value ? "closed" : "opened"
+      sendCustomEvent("TOGGLE_FILTER_SIDEBAR", {
+        searchType: searchStore.searchType,
+        toState,
+      })
+      uiStore.toggleFilters()
+    }
 
     const isXl = computed(() => uiStore.isBreakpoint("xl"))
 

diff --git a/frontend/src/types/analytics.ts b/frontend/src/types/analytics.ts
@@ -140,6 +140,17 @@ export type Events = {
     /** The name of the Vue component used to switch content types. */
     component: string
   }
+  /**
+   * Description: The visibility of the filter sidebar on desktop is toggled
+   * Questions:
+   *   - Do a majority users prefer the sidebar visible or hidden?
+   */
+  TOGGLE_FILTER_SIDEBAR: {
+    /** The media type being searched */
+    searchType: SearchType
+    /** The state of the filter sidebar after the user interaction. */
+    toState: "opened" | "closed"
+  }
   /**
    * Description: The user clicks to a link outside of Openverse.
    * Questions:

diff --git a/frontend/test/unit/specs/components/VHeader/v-header-desktop.spec.js b/frontend/test/unit/specs/components/VHeader/v-header-desktop.spec.js
@@ -50,4 +50,37 @@ describe("VHeaderDesktop", () => {
       searchType: "all",
     })
   })
+
+  it("sends TOGGLE_FILTER_SIDEBAR analytics event when the filter sidebar is opened", async () => {
+    const screen = render(VHeaderDesktop, options)
+    const filterSidebarTrigger = screen.getByText("Filters")
+
+    await fireEvent.click(filterSidebarTrigger)
+
+    expect(sendCustomEventMock).toHaveBeenCalledWith("TOGGLE_FILTER_SIDEBAR", {
+      searchType: "all",
+      toState: "opened",
+    })
+  })
+
+  describe("when the filter sidebar is visible", () => {
+    beforeEach(() => {
+      options.provide[IsSidebarVisibleKey] = ref(true)
+    })
+
+    it("sends TOGGLE_FILTER_SIDEBAR analytics event when the filter sidebar is closed", async () => {
+      const screen = render(VHeaderDesktop, options)
+      const filterSidebarTrigger = screen.getByText("Filters")
+
+      await fireEvent.click(filterSidebarTrigger)
+
+      expect(sendCustomEventMock).toHaveBeenCalledWith(
+        "TOGGLE_FILTER_SIDEBAR",
+        {
+          searchType: "all",
+          toState: "closed",
+        }
+      )
+    })
+  })
 })