Analytics: Add SELECT_SEARCH_RESULT event

frontend/src/components/VAudioDetails/VRelatedAudio.vue

@@ -10,7 +10,12 @@
       class="-mx-2 mb-12 flex flex-col gap-4 md:-mx-4"
     >
       <li v-for="audio in media" :key="audio.id">
-        <VAudioTrack :audio="audio" layout="row" :size="audioTrackSize" />
+        <VAudioTrack
+          :audio="audio"
+          layout="row"
+          :size="audioTrackSize"
+          @mousedown="sendSelectSearchResultEvent(audio)"
+        />
       </li>
     </ol>
     <LoadingIcon
@@ -28,6 +33,11 @@ import { computed, defineComponent, PropType } from "vue"
 
 import { useUiStore } from "~/stores/ui"
 
+import { useSearchStore } from "~/stores/search"
+import { useRelatedMediaStore } from "~/stores/media/related-media"
+import { useAnalytics } from "~/composables/use-analytics"
+import { AUDIO } from "~/constants/media"
+
 import type { FetchState } from "~/models/fetch-state"
 import type { AudioDetail } from "~/models/media"
 
@@ -49,12 +59,24 @@ export default defineComponent({
   },
   setup() {
     const uiStore = useUiStore()
+    const relatedMediaStore = useRelatedMediaStore()
 
     const audioTrackSize = computed(() => {
       return uiStore.isBreakpoint("md") ? "l" : "s"
     })
 
-    return { audioTrackSize }
+    const { sendCustomEvent } = useAnalytics()
+    const sendSelectSearchResultEvent = (audio: AudioDetail) => {
+      sendCustomEvent("SELECT_SEARCH_RESULT", {
+        id: audio.id,
+        relatedTo: relatedMediaStore.mainMediaId,
+        mediaType: AUDIO,
+        provider: audio.provider,
+        query: useSearchStore().searchTerm,
+      })
+    }
+
+    return { audioTrackSize, sendSelectSearchResultEvent }
   },
 })
 </script>

frontend/src/components/VSearchResultsGrid/VAudioCell.vue

@@ -6,6 +6,7 @@
       :search-term="searchTerm"
       v-bind="$attrs"
       v-on="$listeners"
+      @mousedown="sendSelectSearchResultEvent(audio)"
     />
   </li>
 </template>
@@ -15,6 +16,9 @@ import { defineComponent, PropType } from "vue"
 
 import type { AudioDetail } from "~/types/media"
 
+import { useAnalytics } from "~/composables/use-analytics"
+import { AUDIO } from "~/constants/media"
+
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 
 export default defineComponent({
@@ -30,5 +34,22 @@ export default defineComponent({
       required: true,
     },
   },
+  setup(props) {
+    const { sendCustomEvent } = useAnalytics()
+
+    const sendSelectSearchResultEvent = (audio: AudioDetail) => {
+      sendCustomEvent("SELECT_SEARCH_RESULT", {
+        id: audio.id,
+        mediaType: AUDIO,
+        query: props.searchTerm,
+        provider: audio.provider,
+        relatedTo: null,
+      })
+    }
+
+    return {
+      sendSelectSearchResultEvent,
+    }
+  },
 })
 </script>

frontend/src/components/VSearchResultsGrid/VImageCell.vue

@@ -6,6 +6,7 @@
       :href="imageLink"
       class="group relative block w-full overflow-hidden rounded-sm bg-dark-charcoal-10 text-dark-charcoal-10 focus-bold-filled"
       :aria-label="contextSensitiveTitle"
+      @mousedown="sendSelectSearchResultEvent"
     >
       <figure
         itemprop="image"
@@ -47,6 +48,10 @@ import type { AspectRatio, ImageDetail } from "~/types/media"
 import { useImageCellSize } from "~/composables/use-image-cell-size"
 import { useI18n } from "~/composables/use-i18n"
 
+import { useAnalytics } from "~/composables/use-analytics"
+
+import { IMAGE } from "~/constants/media"
+
 import VLicense from "~/components/VLicense/VLicense.vue"
 import VLink from "~/components/VLink.vue"
 
@@ -82,6 +87,10 @@ export default defineComponent({
       type: String as PropType<AspectRatio>,
       default: "square",
     },
+    relatedTo: {
+      type: [String, null] as PropType<string | null>,
+      default: null,
+    },
   },
   setup(props) {
     const isSquare = computed(() => props.aspectRatio === "square")
@@ -139,6 +148,17 @@ export default defineComponent({
       })
     })
 
+    const { sendCustomEvent } = useAnalytics()
+    const sendSelectSearchResultEvent = () => {
+      sendCustomEvent("SELECT_SEARCH_RESULT", {
+        id: props.image.id,
+        mediaType: IMAGE,
+        provider: props.image.provider,
+        query: props.searchTerm || "",
+        relatedTo: props.relatedTo,
+      })
+    }
+
     return {
       styles,
       imgWidth,
@@ -152,6 +172,8 @@ export default defineComponent({
       getImgDimension,
 
       isSquare,
+
+      sendSelectSearchResultEvent,
     }
   },
 })

frontend/src/components/VSearchResultsGrid/VImageGrid.vue

@@ -11,6 +11,7 @@
         :image="image"
         :search-term="searchTerm"
         aspect-ratio="intrinsic"
+        :related-to="relatedTo"
       />
     </ol>
     <h5 v-if="isError && !fetchState.isFinished" class="py-4">
@@ -33,6 +34,7 @@
 import { computed, defineComponent, PropType } from "vue"
 
 import { useSearchStore } from "~/stores/search"
+import { useRelatedMediaStore } from "~/stores/media/related-media"
 
 import type { FetchState } from "~/types/fetch-state"
 import type { ImageDetail } from "~/types/media"
@@ -74,7 +76,11 @@ export default defineComponent({
     const searchTerm = computed(() => searchStore.searchTerm)
     const isError = computed(() => Boolean(props.fetchState.fetchingError))
 
-    return { isError, searchTerm }
+    const relatedTo = computed(() => {
+      return props.isSinglePage ? useRelatedMediaStore().mainMediaId : null
+    })
+
+    return { isError, searchTerm, relatedTo }
   },
 })
 </script>

frontend/src/types/analytics.ts

@@ -171,6 +171,25 @@ export type Events = {
     /** The slug of the license the user clicked on */
     license: string
   }
+  /**
+   * Description: Whenever the user selects a result from the search results page.
+   * Questions:
+   *   - Which results are most popular for given searches?
+   *   - How often do searches lead to clicking a result?
+   *   - Are there popular searches that do not result in result selection?
+   */
+  SELECT_SEARCH_RESULT: {
+    /** The unique ID of the media */
+    id: string
+    /** If the result is a related result, provide the ID of the 'original' result */
+    relatedTo: string | null
+    /** The media type being searched */
+    mediaType: SearchType
+    /** The slug (not the prettified name) of the provider */
+    provider: string
+    /** The search term */
+    query: string
+  }
 }
 
 /**

frontend/test/unit/fixtures/image.js

@@ -0,0 +1,36 @@
+export const image = {
+  id: "f166c4a0-7207-4ea2-8728-15350a60d37f",
+  title: "Cat cafe in Seoul",
+  indexed_on: "2020-04-22T18:09:32.186574Z",
+  foreign_landing_url: "https://www.flickr.com/photos/36703170@N02/5060030894",
+  url: "https://live.staticflickr.com/4111/5060030894_96d2b21794_b.jpg",
+  creator: "toel-uru",
+  creator_url: "https://www.flickr.com/photos/36703170@N02",
+  license: "by-nc-sa",
+  license_version: "2.0",
+  license_url: "https://creativecommons.org/licenses/by-nc-sa/2.0/",
+  provider: "flickr",
+  source: "flickr",
+  category: null,
+  filesize: null,
+  filetype: null,
+  tags: [
+    {
+      name: "cat",
+      accuracy: null,
+    },
+  ],
+  attribution:
+    '"Cat cafe in Seoul" by toel-uru is licensed under CC BY-NC-SA 2.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/2.0/.',
+  fields_matched: ["description", "tags.name", "title"],
+  mature: false,
+  height: 681,
+  width: 1024,
+  thumbnail:
+    "https://api.openverse.engineering/v1/images/f166c4a0-7207-4ea2-8728-15350a60d37f/thumb/",
+  detail_url:
+    "https://api.openverse.engineering/v1/images/f166c4a0-7207-4ea2-8728-15350a60d37f/",
+  related_url:
+    "https://api.openverse.engineering/v1/images/f166c4a0-7207-4ea2-8728-15350a60d37f/related/",
+  unstable__sensitivity: ["sensitive_text"],
+}

frontend/test/unit/specs/components/VSearchResultsGrid/v-audio-cell.spec.js

@@ -0,0 +1,49 @@
+import { fireEvent } from "@testing-library/vue"
+
+import { render } from "~~/test/unit/test-utils/render"
+
+import { getAudioObj } from "~~/test/unit/fixtures/audio"
+
+import { useAnalytics } from "~/composables/use-analytics"
+import { AUDIO } from "~/constants/media"
+
+import VAudioCell from "~/components/VSearchResultsGrid/VAudioCell.vue"
+
+jest.mock("~/composables/use-analytics", () => ({
+  useAnalytics: jest.fn(),
+}))
+
+describe("VAudioCell", () => {
+  let options = {}
+  let sendCustomEventMock = null
+  const audio = getAudioObj()
+
+  beforeEach(() => {
+    sendCustomEventMock = jest.fn()
+    useAnalytics.mockImplementation(() => ({
+      sendCustomEvent: sendCustomEventMock,
+    }))
+    options = {
+      props: {
+        audio,
+        searchTerm: "cat",
+        relatedTo: null,
+      },
+    }
+  })
+
+  it("sends SELECT_SEARCH_RESULT event when clicked", async () => {
+    const { getByRole } = render(VAudioCell, options)
+    const link = getByRole("application")
+
+    await fireEvent.click(link)
+
+    expect(sendCustomEventMock).toHaveBeenCalledWith("SELECT_SEARCH_RESULT", {
+      id: audio.id,
+      mediaType: AUDIO,
+      query: "cat",
+      provider: audio.provider,
+      relatedTo: null,
+    })
+  })
+})

frontend/test/unit/specs/components/VSearchResultsGrid/v-image-cell.spec.js

@@ -0,0 +1,49 @@
+import { fireEvent } from "@testing-library/vue"
+
+import { render } from "~~/test/unit/test-utils/render"
+import { image } from "~~/test/unit/fixtures/image"
+
+import { useAnalytics } from "~/composables/use-analytics"
+
+import { IMAGE } from "~/constants/media"
+
+import VImageCell from "~/components/VSearchResultsGrid/VImageCell.vue"
+
+jest.mock("~/composables/use-analytics", () => ({
+  useAnalytics: jest.fn(),
+}))
+
+describe("VImageCell", () => {
+  let options = {}
+  let sendCustomEventMock = null
+
+  beforeEach(() => {
+    sendCustomEventMock = jest.fn()
+    useAnalytics.mockImplementation(() => ({
+      sendCustomEvent: sendCustomEventMock,
+    }))
+    options = {
+      props: {
+        image,
+        searchTerm: "cat",
+        aspectRatio: "square",
+        relatedTo: null,
+      },
+    }
+  })
+
+  it("sends SELECT_SEARCH_RESULT event when clicked", async () => {
+    const { getByRole } = render(VImageCell, options)
+    const link = getByRole("link")
+
+    await fireEvent.click(link)
+
+    expect(sendCustomEventMock).toHaveBeenCalledWith("SELECT_SEARCH_RESULT", {
+      id: image.id,
+      mediaType: IMAGE,
+      query: "cat",
+      provider: image.provider,
+      relatedTo: null,
+    })
+  })
+})