Analytics Event: LOAD_MORE_RESULTS (#2449)

Co-authored-by: Olga Bulat <obulat@gmail.com>

frontend/src/components/VLoadMore.vue

@@ -20,10 +20,10 @@ import { useElementVisibility } from "@vueuse/core"
 
 import { useRoute } from "@nuxtjs/composition-api"
 
+import { useAnalytics } from "~/composables/use-analytics"
 import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
 import { useI18n } from "~/composables/use-i18n"
-import { useAnalytics } from "~/composables/use-analytics"
 
 import VButton from "~/components/VButton.vue"
 
@@ -38,7 +38,6 @@ export default defineComponent({
     const i18n = useI18n()
     const mediaStore = useMediaStore()
     const searchStore = useSearchStore()
-
     const { sendCustomEvent } = useAnalytics()
 
     // Use the `_searchType` from mediaStore because it falls back to ALL_MEDIA
@@ -73,6 +72,12 @@ export default defineComponent({
 
       reachResultEndEventSent.value = false
 
+      sendCustomEvent("LOAD_MORE_RESULTS", {
+        query: searchStore.searchTerm,
+        searchType: searchStore.searchType,
+        resultPage: currentPage.value || 1,
+      })
+
       await mediaStore.fetchMedia({
         shouldPersistMedia: true,
       })

frontend/src/pages/preferences.vue

@@ -76,7 +76,7 @@
       </ul>
     </div>
 
-    <h2>{{ $t("prefPage.store-state") }}</h2>
+    <h2>{{ $t("prefPage.storeState") }}</h2>
     <pre><code>{{ flags }}</code></pre>
   </VContentPage>
 </template>

frontend/src/types/analytics.ts

@@ -234,6 +234,24 @@ export type Events = {
     query: string
   }
   /**
+   * Description: Whenever the user clicks the load more button
+   * Questions:
+   *   - On what page do users typically find a result?
+   *   - How often and how many pages of results do users load?
+   *   - Can we experiment with the types of results / result rankings
+   *     on certain pages, pages that users don't usually choose a result
+   *     from anyway?
+   */
+  LOAD_MORE_RESULTS: {
+    /** The media type being searched */
+    searchType: SearchType
+    /** The search term */
+    query: string
+    /** The current page of results the user is on,
+     * *before* loading more results.. */
+    resultPage: number
+  }
+  /*
    * Description: Whenever the user sets a filter. Filter category and key are the values used in code, not the user-facing filter labels.
    * Questions:
    *  - Do most users filter their searches?

frontend/test/playwright/e2e/load-more.spec.ts

@@ -135,7 +135,7 @@ test.describe("Load more button", () => {
        * Checks that an analytics event is posted to /api/event and has the correct
        * payload for the REACH_RESULT_END event.
        */
-      test(`Sends a valid analytics event when user reaches the load more page`, async ({
+      test(`Sends a valid REACH_RESULT_END event when user reaches the load more page`, async ({
         page,
         context,
       }) => {
@@ -158,4 +158,78 @@ test.describe("Load more button", () => {
       })
     })
   }
+
+  test.describe(`LOAD_MORE_RESULTS analytics event`, () => {
+    test(`is sent when loading one page of results.`, async ({
+      page,
+      context,
+    }) => {
+      const analyticsEvents = collectAnalyticsEvents(context)
+
+      await goToSearchTerm(page, "cat")
+      await expect(page.locator(loadMoreButton)).toBeVisible()
+
+      await page.click(loadMoreButton)
+
+      const loadMoreEvent = analyticsEvents.find(
+        (event) => event.n === "LOAD_MORE_RESULTS"
+      )
+
+      if (!loadMoreEvent) {
+        throw new Error("Load more event did not send.")
+      }
+
+      expectEventPayloadToMatch(loadMoreEvent, {
+        query: "cat",
+        searchType: "all",
+        resultPage: 1,
+      })
+    })
+
+    test(`is sent when loading two pages of results.`, async ({
+      page,
+      context,
+    }) => {
+      const analyticsEvents = collectAnalyticsEvents(context)
+
+      await goToSearchTerm(page, "cat")
+      await expect(page.locator(loadMoreButton)).toBeVisible()
+
+      await page.click(loadMoreButton)
+      await page.click(loadMoreButton)
+
+      const loadMoreEvents = analyticsEvents.filter(
+        (event) => event.n === "LOAD_MORE_RESULTS"
+      )
+
+      if (!loadMoreEvents) {
+        throw new Error("Load more event did not send.")
+      }
+
+      expect(loadMoreEvents.length).toBe(2)
+      loadMoreEvents.every((event, index) =>
+        expectEventPayloadToMatch(event, {
+          query: "cat",
+          searchType: "all",
+          resultPage: index + 1,
+        })
+      )
+    })
+
+    test(`is not sent when more results are not loaded.`, async ({
+      page,
+      context,
+    }) => {
+      const analyticsEvents = collectAnalyticsEvents(context)
+
+      await goToSearchTerm(page, "cat")
+      await expect(page.locator(loadMoreButton)).toBeVisible()
+
+      const loadMoreEvents = analyticsEvents.filter(
+        (event) => event.n === "LOAD_MORE_RESULTS"
+      )
+
+      expect(loadMoreEvents.length).toBe(0)
+    })
+  })
 })

frontend/test/playwright/utils/analytics.ts

@@ -17,7 +17,7 @@ export function expectEventPayloadToMatch<T extends EventName>(
   event: EventResponse<T>,
   expectedPayload: Events[T]
 ): void {
-  expect(expectedPayload).toMatchObject(event.p)
+  expect(event.p).toMatchObject(expectedPayload)
 }
 
 export const collectAnalyticsEvents = (context: BrowserContext) => {