Analytics event: BACK_TO_SEARCH

frontend/src/components/VBackToSearchResultsLink.vue

@@ -3,6 +3,7 @@
   <VLink
     class="time inline-flex flex-row items-center gap-2 rounded-sm p-2 pe-3 text-xs font-semibold text-dark-charcoal-70 hover:text-dark-charcoal"
     v-bind="$attrs"
+    @mousedown="handleClick"
   >
     <VIcon name="chevron-left" :rtl-flip="true" />
     {{ $t("single-result.back") }}
@@ -12,6 +13,9 @@
 <script lang="ts">
 import { defineComponent } from "vue"
 
+import { useAnalytics } from "~/composables/use-analytics"
+import { useSearchStore } from "~/stores/search"
+
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VLink from "~/components/VLink.vue"
 
@@ -25,5 +29,29 @@ export default defineComponent({
     VLink,
   },
   inheritAttrs: false,
+  props: {
+    /**
+     * The unique ID of the media
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+  },
+  setup(props) {
+    const { sendCustomEvent } = useAnalytics()
+    const searchStore = useSearchStore()
+
+    const handleClick = () => {
+      sendCustomEvent("BACK_TO_SEARCH", {
+        id: props.id,
+        searchType: searchStore.searchType,
+      })
+    }
+
+    return {
+      handleClick,
+    }
+  },
 })
 </script>

frontend/src/components/VLink.vue

@@ -5,6 +5,7 @@
     :class="{ 'inline-flex flex-row items-center gap-2': showExternalIcon }"
     :to="linkTo"
     v-on="$listeners"
+    @mousedown.native="$emit('mousedown', $event)"
     @click.native="$emit('click', $event)"
   >
     <slot />

frontend/src/components/meta/VBackToSearchResultsLink.stories.mdx

@@ -8,7 +8,7 @@ import VBackToSearchResultsLink from "~/components/VBackToSearchResultsLink.vue"
 />
 
 export const Template = (args) => ({
-  template: `<VBackToSearchResultsLink v-bind="args"/>`,
+  template: `<VBackToSearchResultsLink v-bind="args" :id="id" />`,
   components: { VBackToSearchResultsLink },
   setup() {
     return { args }

frontend/src/pages/audio/_id/index.vue

@@ -1,7 +1,7 @@
 <template>
   <VSkipToContentContainer as="main">
     <div v-if="backToSearchPath" class="w-full px-2 py-2 md:px-6">
-      <VBackToSearchResultsLink :href="backToSearchPath" />
+      <VBackToSearchResultsLink :id="audio.id" :href="backToSearchPath" />
     </div>
 
     <VAudioTrack layout="full" :audio="audio" class="main-track" />

frontend/src/pages/image/_id/index.vue

@@ -1,7 +1,7 @@
 <template>
   <VSkipToContentContainer as="main">
     <div v-if="backToSearchPath" class="w-full px-2 py-2 md:px-6">
-      <VBackToSearchResultsLink :href="backToSearchPath" />
+      <VBackToSearchResultsLink :id="image.id" :href="backToSearchPath" />
     </div>
 
     <figure class="relative mb-4 border-b border-dark-charcoal-20 px-6">

frontend/src/types/analytics.ts

@@ -1,4 +1,4 @@
-import type { MediaType } from "~/constants/media"
+import type { MediaType, SearchType } from "~/constants/media"
 import type { ReportReason } from "~/constants/content-report"
 
 /**
@@ -26,6 +26,17 @@ export type Events = {
     /** the identifier of the image */
     identifier: string
   }
+  /**
+   * Click on the 'back to search' link on a single result
+   *
+   * - Are these links used much? Are they necessary?
+   */
+  BACK_TO_SEARCH: {
+    /** The unique ID of the media */
+    id: string
+    /** The content type being searched (can include All content) */
+    searchType: SearchType
+  }
   /**
    * Description: The user clicks the CTA button to the external source to use the image
    * Questions:

frontend/test/playwright/e2e/attribution.spec.ts

@@ -1,5 +1,7 @@
 import { test, expect } from "@playwright/test"
 
+import { turnOnAnalytics } from "~~/test/playwright/utils/navigation"
+
 test.describe.configure({ mode: "parallel" })
 
 test.beforeEach(async ({ context }) => {
@@ -63,6 +65,8 @@ test("sends analytics event on copy", async ({ page }) => {
   const id = "e9d97a98-621b-4ec2-bf70-f47a74380452"
   const format = "rich"
 
+  await turnOnAnalytics(page)
+
   await page.goto(`${mediaType}/${id}?ff_analytics=on`)
   await page.click(`[id="copyattr-${format}"]`)
 

frontend/test/playwright/utils/navigation.ts

@@ -404,3 +404,8 @@ export const closeFiltersUsingCookies = async (page: Page) => {
 export const setBreakpointCookie = async (page: Page, breakpoint: string) => {
   await setCookies(page.context(), { uiBreakpoint: breakpoint })
 }
+
+export const turnOnAnalytics = async (page: Page) => {
+  await page.goto("/preferences")
+  await page.getByLabel("Record custom events and page views.").click()
+}

frontend/test/unit/setup.js

@@ -19,7 +19,16 @@ Vue.use(VueI18n)
  */
 config.stubs["nuxt-link"] = Vue.component("NuxtLink", {
   props: ["to"],
-  template: '<a :href="to" v-on="$listeners"><slot /></a>',
+  methods: {
+    handleClick() {
+      // This is an adaptation to mimic NuxtLink's behavior,
+      // see https://github.com/WordPress/openverse/pull/1118
+      // We should try to remove it after migrating to Nuxt 3.
+      this.$emit("mousedown")
+      this.$emit("click", new MouseEvent("click"))
+    },
+  },
+  template: '<a :href="to" v-on="$listeners" @click="handleClick"><slot /></a>',
 })
 
 config.stubs["svg-icon"] = Vue.component("SvgIcon", {

frontend/test/unit/specs/components/v-back-to-search-results-link.spec.js

@@ -0,0 +1,43 @@
+import { createLocalVue } from "@vue/test-utils"
+import { fireEvent, render } from "@testing-library/vue"
+
+import { PiniaVuePlugin, createPinia } from "~~/test/unit/test-utils/pinia"
+
+import { useAnalytics } from "~/composables/use-analytics"
+
+import VBackToSearchResultsLink from "~/components/VBackToSearchResultsLink.vue"
+
+jest.mock("~/composables/use-analytics", () => ({
+  useAnalytics: jest.fn(),
+}))
+
+const localVue = createLocalVue()
+localVue.use(PiniaVuePlugin)
+describe("VBackToSearchResultsLink", () => {
+  it("should send analytics event when clicked", async () => {
+    const sendCustomEventMock = jest.fn()
+
+    useAnalytics.mockImplementation(() => ({
+      sendCustomEvent: sendCustomEventMock,
+    }))
+
+    const propsData = {
+      id: "123",
+      href: "/search",
+    }
+
+    const screen = render(VBackToSearchResultsLink, {
+      localVue,
+      pinia: createPinia(),
+      propsData,
+    })
+    const link = screen.getByText("single-result.back")
+
+    await fireEvent.click(link)
+
+    expect(sendCustomEventMock).toHaveBeenCalledWith("BACK_TO_SEARCH", {
+      id: propsData.id,
+      searchType: "all",
+    })
+  })
+})