fix(discover): add impression, click, and share events [MOSOWEB-48, MOSOWEB-58]

components/recommendation/RecommendationArticle.vue

@@ -1,31 +1,50 @@
 <script setup lang="ts">
 import type { Recommendation } from '../composables/recommendations'
+import { engagement, impression } from '~~/telemetry/generated/ui'
+import { engagementDetails } from '~~/telemetry/engagementDetails'
 
 const {
   item,
 } = defineProps<{
   item: Recommendation
 }>()
 
+function recordEngagement(gleanId: string) {
+  engagement.record({
+    ui_identifier: gleanId,
+    recommendation_id: item.id,
+    ...engagementDetails[gleanId],
+  })
+}
+
+function recordImpression() {
+  impression.record({
+    ui_identifier: 'discover.recommendation.impression',
+    recommendation_id: item.id,
+  })
+}
+
 const target = ref<HTMLDivElement>()
 const { isActive } = useIntersectionObserver(target, checkIntersection, { threshold: 0.5 })
 
 function checkIntersection([{ isIntersecting }]: [{ isIntersecting: boolean }]): void {
   if (isIntersecting && isActive.value) {
-    // fire analytics event here: item.id || item.title || item.url
+    recordImpression()
     isActive.value = false
   }
 }
 
 const clipboard = useClipboard()
 async function copyLink(url: string): void {
-  if (url)
+  if (url) {
     await clipboard.copy(url)
+    recordEngagement('discover.recommendation.share')
+  }
 }
 </script>
 
 <template>
-  <NuxtLink ref="target" :to="item.url" target="_blank" external mt-5 p-x-8px flex>
+  <NuxtLink ref="target" :to="item.url" target="_blank" external mt-5 p-x-8px flex @click="recordEngagement('discover.recommendation.open')">
     <div class="content" w-full pr>
       <h4 text-sm text-secondary>
         {{ item.publisher }}

composables/recommendations.ts

@@ -6,7 +6,7 @@ export interface Recommendation {
   /** Constant identifier for Recommendation type objects. */
   __typename: string
   /** Numerical identifier for the Recommendation. This is specifically a number for Fx client and Mozilla data pipeline compatibility. */
-  tileId: number
+  id: number
   /** The URL the Recommendation. */
   url: string
   /** The title of the Recommendation. */

telemetry/engagementDetails.ts

@@ -15,4 +15,10 @@ export const engagementDetails: EngagementDetails = {
   'settings.interface.themeColor': {
     engagement_type: 'general',
   },
+  'discover.recommendation.open': {
+    engagement_type: 'general',
+  },
+  'discover.recommendation.share': {
+    engagement_type: 'general',
+  },
 }