Update the analytics events for relevancy

frontend/src/components/VAudioTrack/layouts/VFullLayout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AudioDetail } from "~/types/media"
 import { audioFeatures, AudioSize, AudioStatus } from "~/constants/audio"
+import { useRouteResultParams } from "~/composables/use-route-result-params"
 
 import VGetMediaButton from "~/components/VMediaInfo/VGetMediaButton.vue"
 import VMediaInfo from "~/components/VMediaInfo/VMediaInfo.vue"
@@ -11,6 +12,8 @@ defineProps<{
   status?: AudioStatus
   currentTime: number
 }>()
+
+const { resultParams } = useRouteResultParams()
 </script>
 
 <template>
@@ -42,6 +45,7 @@ defineProps<{
         />
         <VGetMediaButton
           :media="audio"
+          :result-params="resultParams"
           media-type="audio"
           class="col-start-2 !w-full px-0 sm:!w-auto sm:flex-shrink-0"
         />

frontend/src/components/VImageCell/VImageCell.vue

@@ -27,12 +27,14 @@ const props = withDefaults(
        * uses the image's intrinsic size.
        */
       aspectRatio?: AspectRatio
+      position?: number
     }
   >(),
   {
     aspectRatio: "square",
     kind: "search",
     relatedTo: "null",
+    position: -1,
   }
 )
 
@@ -63,9 +65,14 @@ const imageUrl = computed(() => {
 })
 
 const imageLink = computed(() => {
-  return `/image/${props.image.id}/${
-    props.searchTerm ? "?q=" + props.searchTerm : ""
-  }`
+  const params = new URLSearchParams()
+  if (props.searchTerm) {
+    params.set("q", props.searchTerm)
+  }
+  if (props.position) {
+    params.set("position", props.position.toString())
+  }
+  return `/image/${props.image.id}/?${params}`
 })
 
 /**
@@ -115,17 +122,15 @@ const sendSelectSearchResultEvent = (event: MouseEvent) => {
   }
 
   $sendCustomEvent("SELECT_SEARCH_RESULT", {
+    ...searchStore.searchParamsForEvent,
     id: props.image.id,
     kind: props.kind,
     mediaType: IMAGE,
     provider: props.image.provider,
-    query: props.searchTerm || "",
+    position: props.position,
     relatedTo: props.relatedTo ?? "null",
     sensitivities: props.image.sensitivity?.join(",") ?? "",
     isBlurred: shouldBlur.value ?? "null",
-    collectionType:
-      searchStore.strategy !== "default" ? searchStore.strategy : "null",
-    collectionValue: searchStore.collectionValue ?? "null",
   })
 }
 

frontend/src/components/VMediaInfo/VGetMediaButton.vue

@@ -2,22 +2,24 @@
 import { useNuxtApp } from "#imports"
 
 import type { SupportedMediaType } from "~/constants/media"
+import type { SearchResultParams } from "~/types/analytics"
 import type { Media } from "~/types/media"
 
 import VButton from "~/components/VButton.vue"
 
 const props = defineProps<{
   media: Media
   mediaType: SupportedMediaType
+  resultParams: SearchResultParams
 }>()
 
 const { $sendCustomEvent } = useNuxtApp()
 
 const sendGetMediaEvent = () => {
   $sendCustomEvent("GET_MEDIA", {
-    id: props.media.id,
     provider: props.media.provider,
     mediaType: props.mediaType,
+    ...props.resultParams,
   })
 }
 </script>

frontend/src/components/VMediaInfo/VLicenseTabPanel.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { useNuxtApp } from "#imports"
 
-import type { MediaType } from "~/constants/media"
+import { useRouteResultParams } from "~/composables/use-route-result-params"
+import type { SupportedMediaType } from "~/constants/media"
 
 import VCopyButton from "~/components/VCopyButton.vue"
 import VTabPanel from "~/components/VTabs/VTabPanel.vue"
@@ -20,15 +21,17 @@ const props = defineProps<{
    * The media type of the media for which the attribution is generated.
    * Used for analytics.
    */
-  mediaType: MediaType
+  mediaType: SupportedMediaType
 }>()
 
+const { resultParams } = useRouteResultParams()
+
 const { $sendCustomEvent } = useNuxtApp()
 const handleCopy = () => {
   $sendCustomEvent("COPY_ATTRIBUTION", {
-    id: props.mediaId,
     format: props.tab,
     mediaType: props.mediaType,
+    ...resultParams.value,
   })
 }
 </script>

frontend/src/components/VSearchResultsGrid/VAllResultsGrid.vue

@@ -34,11 +34,12 @@ const isSm = computed(() => uiStore.isBreakpoint("sm"))
       "
       :aria-label="collectionLabel"
     >
-      <template v-for="item in results">
+      <template v-for="(item, idx) in results">
         <VImageCell
           v-if="isDetail.image(item)"
           :key="item.id"
           :image="item"
+          :position="idx"
           :search-term="searchTerm"
           kind="search"
           aspect-ratio="square"
@@ -47,6 +48,7 @@ const isSm = computed(() => uiStore.isBreakpoint("sm"))
           v-if="isDetail.audio(item)"
           :key="item.id"
           :audio="item"
+          :position="idx"
           :search-term="searchTerm"
           layout="box"
           :size="isSm ? 'l' : 's'"

frontend/src/components/VSearchResultsGrid/VAudioResult.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useNuxtApp } from "#imports"
 
-import { toRefs } from "vue"
+import { ref } from "vue"
 
 import { useAudioSnackbar } from "~/composables/use-audio-snackbar"
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
@@ -25,16 +25,16 @@ const props = withDefaults(
       layout: Extract<AudioLayout, "box" | "row">
       size?: AudioSize
       audio: AudioDetail
+      position?: number
     }
   >(),
-  { relatedTo: "null" }
+  { relatedTo: "null", position: -1 }
 )
 
 const { $sendCustomEvent } = useNuxtApp()
 const searchStore = useSearchStore()
 
-const { audio } = toRefs(props)
-const { isHidden: shouldBlur } = useSensitiveMedia(audio)
+const { isHidden: shouldBlur } = useSensitiveMedia(ref(props.audio))
 
 const sendSelectSearchResultEvent = (
   audio: AudioDetail,
@@ -47,17 +47,15 @@ const sendSelectSearchResultEvent = (
   }
   useAudioSnackbar().hide()
   $sendCustomEvent("SELECT_SEARCH_RESULT", {
+    ...searchStore.searchParamsForEvent,
     id: audio.id,
     kind: props.kind,
     mediaType: AUDIO,
-    query: props.searchTerm,
+    position: props.position,
     provider: audio.provider,
     relatedTo: props.relatedTo ?? "null",
     sensitivities: audio.sensitivity?.join(",") ?? "",
     isBlurred: shouldBlur.value ?? "null",
-    collectionType:
-      searchStore.strategy !== "default" ? searchStore.strategy : "null",
-    collectionValue: searchStore.collectionValue ?? "null",
   })
 }
 const sendInteractionEvent = (

frontend/src/components/VSearchResultsGrid/VImageCollection.vue

@@ -19,9 +19,10 @@ withDefaults(defineProps<CollectionComponentProps<"image">>(), {
     :aria-label="collectionLabel"
   >
     <VImageCell
-      v-for="image in results"
+      v-for="(image, idx) in results"
       :key="image.id"
       :image="image"
+      :position="idx"
       :search-term="searchTerm"
       aspect-ratio="intrinsic"
       :kind="kind"

frontend/src/composables/use-route-result-params.ts

@@ -0,0 +1,26 @@
+import { firstParam, useRoute } from "#imports"
+
+import { computed } from "vue"
+
+import { SearchResultParams } from "~/types/analytics"
+
+export const useRouteResultParams = () => {
+  const route = useRoute()
+
+  const mediaId = computed(() => firstParam(route.params.id))
+
+  const resultPosition = computed(() => {
+    const positionParam = firstParam(route.query.position)
+    return positionParam ? parseInt(positionParam, 10) : -1
+  })
+  const searchTerm = computed(() => firstParam(route.query.q) ?? "")
+
+  const resultParams = computed<SearchResultParams>(() => {
+    const id = mediaId.value ?? ""
+    const query = searchTerm.value
+    const position = resultPosition.value
+    return { id, query, position }
+  })
+
+  return { resultParams }
+}

frontend/src/pages/audio/[id]/index.vue

@@ -19,13 +19,11 @@ import type { AudioDetail } from "~/types/media"
 import type { AudioInteractionData } from "~/types/analytics"
 import { validateUUID } from "~/utils/query-utils"
 
-import { useAnalytics } from "~/composables/use-analytics"
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
+import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
 import { useSingleResultStore } from "~/stores/media/single-result"
 import singleResultMiddleware from "~/middleware/single-result"
 
-import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
-
 import VAudioTrack from "~/components/VAudioTrack/VAudioTrack.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
 import VRelatedMedia from "~/components/VMediaInfo/VRelatedMedia.vue"
@@ -79,12 +77,13 @@ useHead(() => ({
   title: pageTitle.value,
 }))
 
-const { sendCustomEvent } = useAnalytics()
+const { $sendCustomEvent } = useNuxtApp()
+
 const sendAudioEvent = (
   data: Omit<AudioInteractionData, "component">,
   component: "AudioDetailPage" | "VRelatedAudio"
 ) => {
-  sendCustomEvent("AUDIO_INTERACTION", {
+  $sendCustomEvent("AUDIO_INTERACTION", {
     ...data,
     component,
   })

frontend/src/pages/image/[id]/index.vue

@@ -18,15 +18,14 @@ import { computed, ref, watch } from "vue"
 import { IMAGE } from "~/constants/media"
 import { skipToContentTargetId } from "~/constants/window"
 import type { ImageDetail } from "~/types/media"
-import { useAnalytics } from "~/composables/use-analytics"
 import { useSensitiveMedia } from "~/composables/use-sensitive-media"
 import { useSingleResultPageMeta } from "~/composables/use-single-result-page-meta"
+import { useRouteResultParams } from "~/composables/use-route-result-params"
+import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
 
 import { useSingleResultStore } from "~/stores/media/single-result"
 import singleResultMiddleware from "~/middleware/single-result"
 
-import { usePageRobotsRule } from "~/composables/use-page-robots-rule"
-
 import VBone from "~/components/VSkeleton/VBone.vue"
 import VMediaReuse from "~/components/VMediaInfo/VMediaReuse.vue"
 import VRelatedMedia from "~/components/VMediaInfo/VRelatedMedia.vue"
@@ -101,12 +100,12 @@ const showLoadingState = computed(() => {
   return isLoadingThumbnail.value
 })
 
-const { sendCustomEvent } = useAnalytics()
+const { $sendCustomEvent } = useNuxtApp()
 
-const handleRightClick = (id: string) => {
-  sendCustomEvent("RIGHT_CLICK_IMAGE", {
-    id,
-  })
+const { resultParams } = useRouteResultParams()
+
+const handleRightClick = () => {
+  $sendCustomEvent("RIGHT_CLICK_IMAGE", resultParams.value)
 }
 
 const { reveal, isHidden } = useSensitiveMedia(image.value)
@@ -266,7 +265,7 @@ watch(error, (err) => {
             :height="image.height ?? 0"
             @load="onImageLoaded"
             @error="onImageError"
-            @contextmenu="handleRightClick(image.id)"
+            @contextmenu="handleRightClick"
           />
           <div
             v-if="sketchFabUid"
@@ -286,6 +285,7 @@ watch(error, (err) => {
           <VMediaInfo :media="image" class="min-w-0 sm:col-start-1" />
           <VGetMediaButton
             :media="image"
+            :result-params="resultParams"
             media-type="image"
             class="row-start-1 mb-4 !w-full flex-initial sm:col-start-2 sm:mb-0 sm:mt-1 sm:!w-auto"
           />