fix(glean): add additional engagement event details

MozillaSocial · Oct 6, 2023 · 898dc74 · 898dc74
1 parent e6b7b7b
commit 898dc74
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
@@ -31,7 +31,8 @@ const modes = [
  <button
  v-for="{ icon, label, mode } in modes"
  :key="mode"
- :data-glean="`settings.interface.colorMode.${mode}`"
+ data-glean="settings.interface.colorMode"
+ :data-glean-value="`${mode}`"
  btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base ws-nowrap
  :tabindex="colorMode.preference === mode ? 0 : -1"
  :class="colorMode.preference === mode ? 'pointer-events-none' : 'filter-saturate-0'"

diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
@@ -22,7 +22,8 @@ function setFontSize(e: Event) {
  :min="0"
  :max="sizes.length - 1"
  :step="1"
- :data-glean="`settings.interface.fontSize.${sizes.indexOf(userSettings.fontSize)}`"
+ data-glean="settings.interface.fontSize"
+ :data-glean-value="`${sizes.indexOf(userSettings.fontSize)}`"
  type="range"
  focus:outline-none
  appearance-none bg-transparent

diff --git a/components/settings/SettingsThemeColors.vue b/components/settings/SettingsThemeColors.vue
@@ -21,7 +21,8 @@ function updateTheme(theme: ThemeColors) {
  }"
  :class="currentTheme === key ? 'ring-2' : 'scale-90'"
  :title="key"
- :data-glean="`settings.interface.themeColor.${key}`"
+ data-glean="settings.interface.themeColor"
+ :data-glean-value="`${key}`"
  w-8 h-8 rounded-full transition-all
  ring="$local-ring-color offset-3 offset-$c-bg-base"
  @click="updateTheme(theme)"

diff --git a/modules/glean/runtime/glean-plugin.client.ts b/modules/glean/runtime/glean-plugin.client.ts
@@ -33,11 +33,27 @@ export default defineNuxtPlugin((nuxtApp) => {
  const eventTarget = ev?.target as Element
  const closestButton = eventTarget.closest('button')
 
+ interface EngagementDetails {
+ [propName: string]: {
+ engagement_type: string
+ ui_additional_detail: string
+ }
+ }
+
+ const engagementDetails: EngagementDetails = {
+ 'settings.interface.colorMode': {
+ engagement_type: 'general',
+ ui_additional_detail: 'additional deets go here', // todo
+ },
+ }
+
  if (closestButton?.hasAttribute('href'))
  linkClick.record({ target_url: closestButton.getAttribute('href') || '' })
 
+ const data = eventTarget?.getAttribute('data-glean') || ''
+ const value = eventTarget?.getAttribute('data-glean-value') || ''
  if (eventTarget.hasAttribute('data-glean'))
- engagement.record({ ui_identifier: eventTarget?.getAttribute('data-glean') || '' })
+ engagement.record({ ui_identifier: data, engagement_value: value, ...engagementDetails[data] })
  }
 
  function handleLinkClick(ev: MouseEvent) {