Merge pull request #55 from MozillaSocial/fix/glean-add-real-data

fix(glean): add account data, wire up link/button click events

components/settings/SettingsColorMode.vue

@@ -31,6 +31,8 @@ const modes = [
     <button
       v-for="{ icon, label, mode } in modes"
       :key="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'"

components/settings/SettingsFontSize.vue

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

components/settings/SettingsThemeColors.vue

@@ -21,6 +21,8 @@ function updateTheme(theme: ThemeColors) {
       }"
       :class="currentTheme === key ? 'ring-2' : 'scale-90'"
       :title="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)"

composables/users.ts

@@ -3,6 +3,7 @@ import type { mastodon } from 'masto'
 import type { EffectScope, Ref } from 'vue'
 import type { MaybeRefOrGetter, RemovableRef } from '@vueuse/core'
 import type { ElkMasto } from './masto/masto'
+import { mastodonAccountHandle, mastodonAccountId, mastodonInstanceDomain } from '~/telemetry/generated/identifiers'
 import type { UserLogin } from '~/types'
 import type { Overwrite } from '~/types/utils'
 import {
@@ -166,6 +167,9 @@ export async function loginTo(masto: ElkMasto, user: Overwrite<UserLogin, { acco
     })
   }
 
+  mastodonAccountId.set(me.id)
+  mastodonInstanceDomain.set(user.server)
+  mastodonAccountHandle.set(me.username)
   currentUserHandle.value = me.acct
 }
 

modules/glean/runtime/glean-plugin.client.ts

@@ -1,7 +1,9 @@
 import Glean from '@mozilla/glean/web'
 import * as log from 'tauri-plugin-log-api'
 
-import { load } from '../../../telemetry/generated/page'
+import { linkClick, pageUrl, pageView, referrerUrl } from '../../../telemetry/generated/web'
+import { userAgent } from '../../../telemetry/generated/identifiers'
+import { engagement } from '../../../telemetry/generated/ui'
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.hook('app:mounted', () => {
@@ -11,18 +13,67 @@ export default defineNuxtPlugin((nuxtApp) => {
     const devMode = useAppConfig().env === ('dev' || 'canary' || 'preview')
     const uploadEnabled = devMode // this will eventually be a setting that the user can toggle
 
-    Glean.initialize(GLEAN_APP_ID, uploadEnabled, { })
+    Glean.initialize(GLEAN_APP_ID, uploadEnabled, {})
+    userAgent.set(navigator.userAgent)
 
     // Debugging
     if (devMode) {
       Glean.setLogPings(true) // logs to the console
       Glean.setDebugViewTag('moso-elk-dev') // logs to https://debug-ping-preview.firebaseapp.com
     }
+
+    const eventListener = (event: MouseEvent) => {
+      if (event.type === 'click') {
+        handleButtonClick(event)
+        handleLinkClick(event)
+      }
+    }
+
+    function handleButtonClick(ev: MouseEvent) {
+      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: data, engagement_value: value, ...engagementDetails[data] })
+    }
+
+    function handleLinkClick(ev: MouseEvent) {
+      const eventTarget = ev?.target as Element
+      const closestLink = eventTarget.closest('a')
+      if (closestLink)
+        linkClick.record({ target_url: closestLink.getAttribute('href') || '' })
+    }
+
+    window.addEventListener('click', eventListener)
   })
 
   nuxtApp.hook('page:finish', () => {
-    const route = useRoute()
+    pageUrl.set(window.location.href)
+
+    if (document.referrer !== '')
+      referrerUrl.set(window.location.href)
+    else
+      referrerUrl.set('')
 
-    load.record({ path: route.path })
+    pageView.record()
   })
 })

telemetry/generated/identifiers.ts

@@ -0,0 +1,88 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// AUTOGENERATED BY glean_parser v8.1.1. DO NOT EDIT. DO NOT COMMIT.
+
+import StringMetricType from "@mozilla/glean/private/metrics/string";
+
+/**
+ * The Adjust device ID for this user, if available.
+ *
+ * Generated from `identifiers.adjust_device_id`.
+ */
+export const adjustDeviceId = new StringMetricType({
+    category: "identifiers",
+    name: "adjust_device_id",
+    sendInPings: ["events"],
+    lifetime: "ping",
+    disabled: false,
+});
+
+/**
+ * The user's FxA account ID, if available.
+ *
+ * Generated from `identifiers.fxa_account_id`.
+ */
+export const fxaAccountId = new StringMetricType({
+    category: "identifiers",
+    name: "fxa_account_id",
+    sendInPings: ["events"],
+    lifetime: "ping",
+    disabled: false,
+});
+
+/**
+ * The user's account handle.
+ *
+ * Generated from `identifiers.mastodon_account_handle`.
+ */
+export const mastodonAccountHandle = new StringMetricType({
+    category: "identifiers",
+    name: "mastodon_account_handle",
+    sendInPings: ["events"],
+    lifetime: "application",
+    disabled: false,
+});
+
+/**
+ * The user's numeric account ID from Mastodon.
+ *
+ * Generated from `identifiers.mastodon_account_id`.
+ */
+export const mastodonAccountId = new StringMetricType({
+    category: "identifiers",
+    name: "mastodon_account_id",
+    sendInPings: ["events"],
+    lifetime: "application",
+    disabled: false,
+});
+
+/**
+ * The domain of the Mastodon instance where the user's Mastodon account is hosted
+ * (e.g. `mozilla.social`).
+ *
+ * Generated from `identifiers.mastodon_instance_domain`.
+ */
+export const mastodonInstanceDomain = new StringMetricType({
+    category: "identifiers",
+    name: "mastodon_instance_domain",
+    sendInPings: ["events"],
+    lifetime: "application",
+    disabled: false,
+});
+
+/**
+ * The device user agent string.
+ *
+ * Generated from `identifiers.user_agent`.
+ */
+export const userAgent = new StringMetricType({
+    category: "identifiers",
+    name: "user_agent",
+    sendInPings: ["events"],
+    lifetime: "application",
+    disabled: false,
+});
+
+

telemetry/generated/ui.ts

@@ -0,0 +1,50 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// AUTOGENERATED BY glean_parser v8.1.1. DO NOT EDIT. DO NOT COMMIT.
+
+import EventMetricType from "@mozilla/glean/private/metrics/event";
+
+/**
+ * Event triggered when a user taps/clicks on a UI element, triggering a change in
+ * app state.
+ *
+ * Generated from `ui.engagement`.
+ */
+export const engagement = new EventMetricType<{
+    corpus_recommendation_id?: string,
+    engagement_type?: string,
+    engagement_value?: string,
+    mastodon_status_id?: string,
+    ui_additional_detail?: string,
+    ui_identifier?: string,
+}>({
+    category: "ui",
+    name: "engagement",
+    sendInPings: ["events"],
+    lifetime: "ping",
+    disabled: false,
+}, ["corpus_recommendation_id", "engagement_type", "engagement_value", "mastodon_status_id", "ui_additional_detail", "ui_identifier"]);
+
+/**
+ * Event triggered when a user views a notable UI element. Triggered once per page
+ * load, as soon as any pixel of that UI element is visible in the foreground for
+ * any length of time. UI elements may include: content, pages, CTAs, etc.
+ *
+ * Generated from `ui.impression`.
+ */
+export const impression = new EventMetricType<{
+    corpus_recommendation_id?: string,
+    mastodon_status_id?: string,
+    ui_additional_detail?: string,
+    ui_identifier?: string,
+}>({
+    category: "ui",
+    name: "impression",
+    sendInPings: ["events"],
+    lifetime: "ping",
+    disabled: false,
+}, ["corpus_recommendation_id", "mastodon_status_id", "ui_additional_detail", "ui_identifier"]);
+
+

telemetry/generated/web.ts

@@ -0,0 +1,68 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// AUTOGENERATED BY glean_parser v8.1.1. DO NOT EDIT. DO NOT COMMIT.
+
+import StringMetricType from "@mozilla/glean/private/metrics/string";
+import EventMetricType from "@mozilla/glean/private/metrics/event";
+
+/**
+ * Event triggered when a user clicks a link on a web page.
+ *
+ * Generated from `web.link_click`.
+ */
+export const linkClick = new EventMetricType<{
+    element_id?: string,
+    target_url?: string,
+}>({
+    category: "web",
+    name: "link_click",
+    sendInPings: ["events"],
+    lifetime: "ping",
+    disabled: false,
+}, ["element_id", "target_url"]);
+
+/**
+ * The full URL of the page that was visited, along with URL query parameters. For
+ * example, `https://mozilla.social/home?utm_source=test`.
+ *
+ * Generated from `web.page_url`.
+ */
+export const pageUrl = new StringMetricType({
+    category: "web",
+    name: "page_url",
+    sendInPings: ["events"],
+    lifetime: "application",
+    disabled: false,
+});
+
+/**
+ * Event triggered when a user requests to load a web page.
+ *
+ * Generated from `web.page_view`.
+ */
+export const pageView = new EventMetricType({
+    category: "web",
+    name: "page_view",
+    sendInPings: ["events"],
+    lifetime: "ping",
+    disabled: false,
+}, []);
+
+/**
+ * The full URL of the previous web page from which a link was followed in order
+ * to trigger the page view. Comes from the `referer` field of the HTTP header.
+ * May not always be available. For example, `https://www.google.com`.
+ *
+ * Generated from `web.referrer_url`.
+ */
+export const referrerUrl = new StringMetricType({
+    category: "web",
+    name: "referrer_url",
+    sendInPings: ["events"],
+    lifetime: "application",
+    disabled: false,
+});
+
+