From 01abbae28010f70bf8919315d1ab0b0d74639295 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Viricel?=
 <38253764+wazolab@users.noreply.github.com>
Date: Tue, 10 Dec 2024 12:45:27 +0100
Subject: [PATCH] Add new tracking events (#444)

---
 README.md                                 |  6 ++--
 components/Isochrone/IsochroneTrigger.vue | 43 ++++++++++++++++++++---
 components/Map/MapControlsBackground.vue  |  7 ++--
 components/PoisCard/PoiCardContent.vue    | 12 ++++++-
 composables/useIsochrone.ts               |  4 +--
 lib/tracker-google.ts                     | 22 +++++++++++-
 lib/tracker-matomo.ts                     | 25 +++++++++++--
 lib/trackers.ts                           | 15 ++++++--
 8 files changed, 116 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 080d20b86..600d0b962 100644
--- a/README.md
+++ b/README.md
@@ -188,12 +188,14 @@ Special formatting support:
 | Seach query | search_query | | | | trackSiteSearch | query |
 | Selecting a search result | search_result_event | | search_result_event | type, title | trackEvent | event, action, title, resultType |
 | Opening the popup | popup | | pageview | pageTitle, pageLocation, pagePath, poiId | trackPageView | title, Url |
-| Action on the popup | popup_event | details, route, explore, favorite, zoom | popup_event | action, title, poiId, category | trackEvent | event, action, title, poiId |
-| Action on the map control | map_control_event | 3d, background, explorer, favorite | map_control_event | action | trackEvent | event, action |
+| Action on the popup | popup_event | details, route, explore, favorite, zoom, isochrone | popup_event | action, title, poiId, category | trackEvent | event, action, title, poiId |
+| Action on the map control | map_control_event | 3d, explorer, favorite | map_control_event | action | trackEvent | event, action |
+| Action on the map background control | map_control_event | background | map_control_event | action, background | trackEvent | event, action, background |
 | Action on favorites | favorites_event | open_share, copy_link, exportPDF, exportCSV | favorites_event | action | trackEvent | event, action |
 | Notebook | notebook_event | open | pageview | pageTitle, pagePath | trackPageView | title, Url |
 | External links | external_link | | external_link | Url, title | trackLink | Url |
 | Action on details page | details_event | favorite | details_event | action, title, poiId | trackEvent | event, action, title, poiId |
+| Select isochrone profile | isochrone_event | select_profile | isochrone_event | action, profile | trackEvent | event, action, profile |
 
 Note on Matomo. `Origin` is a set as dimension `1` and should be configured as is on Matomo.
 
diff --git a/components/Isochrone/IsochroneTrigger.vue b/components/Isochrone/IsochroneTrigger.vue
index 569b4ae7a..7e363f45e 100644
--- a/components/Isochrone/IsochroneTrigger.vue
+++ b/components/Isochrone/IsochroneTrigger.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import type { ProfileKeys } from '~/composables/useIsochrone'
 
 //
 // Props
@@ -8,6 +9,14 @@ const props = defineProps<{
   feature: GeoJSON.Feature
 }>()
 
+//
+// Emits
+//
+const emit = defineEmits<{
+  (event: 'profileUpdate', profile: Profile): void
+  (event: 'triggerClick'): void
+}>()
+
 //
 // Composables
 //
@@ -29,20 +38,44 @@ async function handleProfileUpdate(value: Profile) {
     loading.value = true
 
     await fetchIsochrone(props.feature, value)
+
+    const profileTrackingLabel = Object.keys(profiles).find(key => profiles[key as ProfileKeys] === value)
+
+    if (!profileTrackingLabel)
+      throw new Error(`Tracking label for ${value} not found`)
+
+    emit('profileUpdate', profileTrackingLabel)
+
     toggleOverlay()
   }
-  catch (e: any) {
-    error.value = e.message
+  catch (err) {
+    if (err instanceof Error) {
+      error.value = err.message
+    }
+    else {
+      error.value = 'An unknown error occurred'
+    }
   }
   finally {
     loading.value = false
     profile.value = undefined
   }
 }
+
+function handleTriggerClick() {
+  toggleOverlay()
+  emit('triggerClick')
+}
 </script>
 
 <template>
-  <button type="button" :title="t('isochrone.trigger.title')" :class="$attrs.class" :aria-label="t('isochrone.trigger.label')" @click.stop="toggleOverlay">
+  <button
+    type="button"
+    :title="t('isochrone.trigger.title')"
+    :class="$attrs.class"
+    :aria-label="t('isochrone.trigger.label')"
+    @click.stop="handleTriggerClick"
+  >
     <slot />
   </button>
 
@@ -84,11 +117,11 @@ async function handleProfileUpdate(value: Profile) {
             </template>
             {{ t(`isochrone.profiles.${profiles.foot}`) }}
           </VBtn>
-          <VBtn :value="profiles.cycle">
+          <VBtn :value="profiles.bicycle">
             <template #prepend>
               <FontAwesomeIcon icon="biking" />
             </template>
-            {{ t(`isochrone.profiles.${profiles.cycle}`) }}
+            {{ t(`isochrone.profiles.${profiles.bicycle}`) }}
           </VBtn>
           <VBtn :value="profiles.car">
             <template #prepend>
diff --git a/components/Map/MapControlsBackground.vue b/components/Map/MapControlsBackground.vue
index d5d5ceebb..fd55ad6df 100644
--- a/components/Map/MapControlsBackground.vue
+++ b/components/Map/MapControlsBackground.vue
@@ -88,8 +88,11 @@ export default defineNuxtComponent({
     },
 
     changeBackground(background: MapStyleEnum) {
-      // TODO mettre le background selectioné
-      this.$tracking({ type: 'map_control_event', event: 'background' })
+      this.$tracking({
+        type: 'map_control_event',
+        event: 'background',
+        background,
+      })
 
       this.activeBackground = background
       routerPushHashUpdate(this.$router, {
diff --git a/components/PoisCard/PoiCardContent.vue b/components/PoisCard/PoiCardContent.vue
index b9a3f9570..dd88bda8b 100644
--- a/components/PoisCard/PoiCardContent.vue
+++ b/components/PoisCard/PoiCardContent.vue
@@ -135,7 +135,7 @@ function onFavoriteClick() {
   emit('favoriteClick', props.poi)
 }
 
-function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom') {
+function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom' | 'isochrone') {
   $tracking({
     type: 'popup_event',
     event,
@@ -144,6 +144,14 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
     title: featureName.value,
   })
 }
+
+function trackIsochroneEvent(profile: Profile) {
+  $tracking({
+    type: 'isochrone_event',
+    event: 'select_profile',
+    profile,
+  })
+}
 </script>
 
 <template>
@@ -245,6 +253,8 @@ function trackingPopupEvent(event: 'details' | 'route' | 'explore' | 'favorite'
           isSameFeatureAsIsochrone && 'tw-bg-blue-600 tw-text-white hover:tw-bg-blue-500',
           !isSameFeatureAsIsochrone && 'hover:tw-bg-zinc-100',
         ]"
+        @trigger-click="trackingPopupEvent('isochrone')"
+        @profile-update="trackIsochroneEvent"
       >
         <FontAwesomeIcon :color="isSameFeatureAsIsochrone ? '#fff' : colorLine" icon="clock" size="sm" />
         <span class="tw-text-sm">{{ t('isochrone.trigger.label') }}</span>
diff --git a/composables/useIsochrone.ts b/composables/useIsochrone.ts
index fbd36114b..a04e69b88 100644
--- a/composables/useIsochrone.ts
+++ b/composables/useIsochrone.ts
@@ -6,12 +6,12 @@ import { mapStore as useMapStore } from '~/stores/map'
 
 export const profiles = {
   car: 'driving-car',
-  cycle: 'cycling-regular',
+  bicycle: 'cycling-regular',
   foot: 'foot-walking',
   wheelchair: 'wheelchair',
 }
 
-type ProfileKeys = keyof typeof profiles
+export type ProfileKeys = keyof typeof profiles
 export type Profile = (typeof profiles)[ProfileKeys]
 type ORSData = FeatureCollection<Geometry, GeoJsonProperties> & {
   bbox: LngLatBoundsLike
diff --git a/lib/tracker-google.ts b/lib/tracker-google.ts
index 0968fb5cf..c9b75b1fc 100644
--- a/lib/tracker-google.ts
+++ b/lib/tracker-google.ts
@@ -105,7 +105,19 @@ export default class Google implements Tracker {
         break
       }
       case 'map_control_event': {
-        window.dataLayer?.push({ event: event.type, action: event.event })
+        const dataLayerObject: {
+          event: 'map_control_event'
+          action: '3d' | 'explorer' | 'favorite' | 'background'
+          background?: MapStyleEnum
+        } = {
+          event: event.type,
+          action: event.event,
+        }
+
+        if (event.event === 'background')
+          dataLayerObject.background = event.background
+
+        window.dataLayer?.push(dataLayerObject)
         break
       }
       case 'favorites_event': {
@@ -129,6 +141,14 @@ export default class Google implements Tracker {
         })
         break
       }
+      case 'isochrone_event': {
+        window.dataLayer?.push({
+          event: event.type,
+          action: event.event,
+          profile: event.profile,
+        })
+        break
+      }
     }
   }
 }
diff --git a/lib/tracker-matomo.ts b/lib/tracker-matomo.ts
index 692f90664..ef57a802d 100644
--- a/lib/tracker-matomo.ts
+++ b/lib/tracker-matomo.ts
@@ -119,13 +119,20 @@ export default class Matomo implements Tracker {
         break
       }
       case 'map_control_event': {
-        _paq.push([
+        const eventParams = [
           'trackEvent',
           // category
           event.type,
           // action
           event.event,
-        ])
+        ]
+
+        if (event.event === 'background') {
+          eventParams.push('background')
+          eventParams.push(event.background)
+        }
+
+        _paq.push(eventParams)
         break
       }
       case 'favorites_event': {
@@ -161,6 +168,20 @@ export default class Matomo implements Tracker {
         ])
         break
       }
+      case 'isochrone_event': {
+        _paq.push([
+          'trackEvent',
+          // category
+          event.type,
+          // action
+          event.event,
+          // name
+          'profile',
+          // value
+          event.profile,
+        ])
+        break
+      }
     }
   }
 }
diff --git a/lib/trackers.ts b/lib/trackers.ts
index 1280ed124..5214c86b8 100644
--- a/lib/trackers.ts
+++ b/lib/trackers.ts
@@ -6,7 +6,6 @@ import type { ApiMenuCategory, MenuItem } from '~/lib/apiMenu'
 import type { OriginEnum } from '~/utils/types'
 
 // Also Update README.md according to tracking changes.
-
 export type Event =
   | {
     type: 'page'
@@ -49,14 +48,19 @@ export type Event =
   }
   | {
     type: 'popup_event'
-    event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom'
+    event: 'details' | 'route' | 'explore' | 'favorite' | 'zoom' | 'isochrone'
     poiId: ApiPoiId
     category: string
     title?: string
   }
   | {
     type: 'map_control_event'
-    event: '3d' | 'background' | 'explorer' | 'favorite'
+    event: '3d' | 'explorer' | 'favorite'
+  }
+  | {
+    type: 'map_control_event'
+    event: 'background'
+    background: MapStyleEnum
   }
   | {
     type: 'favorites_event'
@@ -77,6 +81,11 @@ export type Event =
     poiId: ApiPoiId
     title?: string
   }
+  | {
+    type: 'isochrone_event'
+    event: 'select_profile'
+    profile: Profile
+  }
 
 export interface Tracker {
   consent: (app: App) => void