fix(glean): add user opt-out setting

composables/settings/definition.ts

@@ -8,6 +8,7 @@ export type OldFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type ColorMode = 'light' | 'dark' | 'system'
 
 export interface PreferencesSettings {
+  allowGlean: boolean
   hideAltIndicatorOnPosts: boolean
   hideBoostCount: boolean
   hideReplyCount: boolean
@@ -60,6 +61,7 @@ export function getDefaultLanguage(languages: string[]) {
 }
 
 export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
+  allowGlean: true,
   hideAltIndicatorOnPosts: false,
   hideBoostCount: false,
   hideReplyCount: false,

composables/settings/storage.ts

@@ -43,5 +43,5 @@ export function getPreferences<T extends keyof PreferencesSettings>(userSettings
 
 export function togglePreferences(key: keyof PreferencesSettings) {
   const flag = usePreferences(key)
-  flag.value = !flag.value
+  return flag.value = !flag.value
 }

locales/en.json

@@ -544,6 +544,12 @@
       "zen_mode": "Zen mode",
       "zen_mode_description": "Hide asides unless the mouse cursor is over them. Also hide some elements from the timeline."
     },
+    "privacy": {
+      "data_collection": "Data collection and use",
+      "label": "Privacy",
+      "opt_out_description": "Allow technical, interaction, campaign and referral data to be sent to Mozilla. With this data you will have a personalized experience.",
+      "opt_out_title": "Help improve Mozilla Social"
+    },
     "profile": {
       "appearance": {
         "bio": "Bio",

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

@@ -11,10 +11,13 @@ export default defineNuxtPlugin((nuxtApp) => {
     log.info('Glean: App mounted, start initing glean')
 
     const GLEAN_APP_ID = 'mozilla-social-web'
-    const devMode = useAppConfig().env === ('dev' || 'canary' || 'preview')
-    const uploadEnabled = devMode // this will eventually be a setting that the user can toggle
+    const env = useAppConfig().env
+    const devMode = env === ('dev' || 'canary' || 'preview')
+    const userSettings = useUserSettings()
+    const allowGlean = getPreferences(userSettings.value, 'allowGlean')
+    const uploadEnabled = devMode && allowGlean
 
-    Glean.initialize(GLEAN_APP_ID, uploadEnabled, {})
+    Glean.initialize(GLEAN_APP_ID, uploadEnabled, { channel: env })
     userAgent.set(navigator.userAgent)
 
     // Debugging

pages/settings.vue

@@ -12,6 +12,7 @@ useHydratedHead({
 const route = useRoute()
 
 const isRootPath = computedEager(() => route.name === 'settings')
+const devMode = useAppConfig().env === ('dev' || 'canary' || 'preview')
 </script>
 
 <template>
@@ -63,6 +64,14 @@ const isRootPath = computedEager(() => route.name === 'settings')
               to="/settings/preferences"
               :match="$route.path.startsWith('/settings/preferences/')"
             />
+            <SettingsItem
+              v-if="devMode"
+              command
+              icon="i-ri-lock-line"
+              :text="isHydrated ? $t('settings.privacy.label') : ''"
+              to="/settings/privacy"
+              :match="$route.path.startsWith('/settings/privacy/')"
+            />
             <SettingsItem
               command
               icon="i-ri:information-line"

pages/settings/privacy/index.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Glean from '@mozilla/glean/web'
+import { mastodonAccountHandle, mastodonAccountId } from '~/telemetry/generated/identifiers'
+import { userAgent } from '~~/telemetry/generated/identifiers'
+
+const user = currentUser.value
+
+const { t } = useI18n()
+
+useHydratedHead({
+  title: () => `${t('settings.privacy.label')} | ${t('nav.settings')}`,
+})
+const userSettings = useUserSettings()
+
+function toggleOptOut() {
+  const allowGlean = togglePreferences('allowGlean')
+  Glean.setUploadEnabled(allowGlean)
+
+  // reset identifiers if user opts back in
+  if (user && allowGlean) {
+    mastodonAccountHandle.set(user.account.acct)
+    mastodonAccountId.set(user.account.id)
+    userAgent.set(navigator.userAgent)
+  }
+}
+</script>
+
+<template>
+  <MainContent back-on-small-screen no-beta-label>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.interface.label') }}</span>
+      </div>
+    </template>
+    <div p6 flex="~ col gap6">
+      <h2 text-xl>
+        {{ $t('settings.privacy.data_collection') }}
+      </h2>
+      <div>
+        <h3 text-lg>
+          {{ $t('settings.privacy.opt_out_title') }}
+        </h3>
+        <SettingsToggleItem
+          :checked="getPreferences(userSettings, 'allowGlean')"
+          @click="toggleOptOut()"
+        >
+          {{ $t('settings.privacy.opt_out_description') }}
+        </SettingsToggleItem>
+      </div>
+    </div>
+  </MainContent>
+</template>

telemetry/generated/ui.ts

@@ -7,8 +7,8 @@
 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.
+ * Event triggered when a user taps/clicks on a UI element, triggering a change in
+ * app state.
  *
  * Generated from `ui.engagement`.
  */

telemetry/generated/web.ts

@@ -4,8 +4,8 @@
 
 // AUTOGENERATED BY glean_parser v8.1.1. DO NOT EDIT. DO NOT COMMIT.
 
-import EventMetricType from "@mozilla/glean/private/metrics/event";
 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.