feat: analytics

Author: sifferhans

frontend/app/api/generated.ts

@@ -1706,7 +1706,7 @@ export type StandingsUnitPageQuery = { __typename?: 'Query', myCurrentProject: {
 export type GetMeQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetMeQuery = { __typename?: 'Query', me: { __typename?: 'User', id: string, name: string, email: string, image?: string | null, membersId: string, gender: Gender, birthdate: string, church: { __typename?: 'Church', id: string, name: string, country: string, category: ChurchCategory }, roles: Array<{ __typename?: 'UserRole', id: string, role: RoleType, scope?: { __typename?: 'RoleScope', id: string, type: ScopeType, church?: { __typename?: 'Church', id: string } | null, team?: { __typename?: 'Team', id: string } | null, project?: { __typename?: 'Project', id: string } | null } | null }> } };
+export type GetMeQuery = { __typename?: 'Query', me: { __typename?: 'User', id: string, name: string, email: string, image?: string | null, membersId: string, gender: Gender, birthdate: string, age?: number | null, church: { __typename?: 'Church', id: string, name: string, country: string, category: ChurchCategory }, roles: Array<{ __typename?: 'UserRole', id: string, role: RoleType, scope?: { __typename?: 'RoleScope', id: string, type: ScopeType, church?: { __typename?: 'Church', id: string } | null, team?: { __typename?: 'Team', id: string } | null, project?: { __typename?: 'Project', id: string } | null } | null }> } };
 
 export type DeleteAchievementMutationVariables = Exact<{
   id: Scalars['ID']['input'];
@@ -2300,6 +2300,7 @@ export const GetMeDocument = gql`
     }
     gender
     birthdate
+    age
     roles {
       id
       role

frontend/app/composables/useAuth.ts

@@ -14,6 +14,7 @@ gql(`
       }
       gender
       birthdate
+      age
       roles {
         id
         role
@@ -36,6 +37,7 @@ gql(`
 `)
 
 export function useAuth() {
+  const { reset } = useAnalytics()
   const token = useCookie('token')
   const isLoading = useState('isLoading', () => true)
   const me = useState<GetMeQuery['me'] | null | undefined>('me', () => null)
@@ -75,6 +77,7 @@ export function useAuth() {
       me.value = newMe
       isLoading.value = false
     },
+    { immediate: true },
   )
 
   const getAccessToken = async () => {
@@ -98,6 +101,7 @@ export function useAuth() {
   }
 
   const config = useRuntimeConfig()
+  const { track } = useAnalytics()
 
   function loginWithRedirect() {
     return navigateTo(
@@ -108,6 +112,14 @@ export function useAuth() {
     )
   }
 
+  function logout() {
+    track(AnalyticsEvent.LogoutCompleted)
+    reset()
+    token.value = null
+    me.value = null
+    return navigateTo('/')
+  }
+
   // Authorization
   const isSuperAdmin = computed(() => {
     return me.value?.roles.some((role) => role.role === RoleType.Superadmin)
@@ -133,6 +145,7 @@ export function useAuth() {
     getAccessToken,
     setAccessToken,
     loginWithRedirect,
+    logout,
     isLoading,
     me,
     token,

frontend/app/pages/settings.vue

@@ -40,7 +40,9 @@ const { open: consentsOpen } = useConsentsDialog()
       </NuxtLink>
     </template>
 
-    <DesignPanel class="gap-list-section-inset flex flex-col">
+    <DesignPanel
+      class="gap-list-section-inset flex flex-col mb-list-section-gap"
+    >
       <UDropdownMenu
         :ui="{
           content:
@@ -91,12 +93,26 @@ const { open: consentsOpen } = useConsentsDialog()
         </div>
       </UDropdownMenu>
       <hr class="border-border-default mx-3" />
+      <button class="flex items-center justify-between gap-2.5 px-3 py-2">
+        <p class="text-label">{{ $t('settings.notifications') }}</p>
+        <DesignButton size="small" variant="secondary" class="grow-0">
+          {{ $t('settings.notificationsEnabled') }}
+        </DesignButton>
+      </button>
+    </DesignPanel>
+
+    <DesignPanel class="gap-list-section-inset flex flex-col">
+      <button class="flex items-center justify-between gap-2.5 px-3 py-2 h-12">
+        <p class="text-label">{{ $t('settings.addToHomeScreen') }}</p>
+        <Icon name="lucide:chevron-right" class="size-6" />
+      </button>
+      <hr class="border-border-default mx-3" />
       <button
-        class="flex items-center justify-between gap-2.5 px-3 py-2"
+        class="flex items-center justify-between gap-2.5 px-3 py-2 h-12"
         @click="consentsOpen = true"
       >
         <p class="text-label">{{ $t('settings.consents') }}</p>
-        <DesignIconButton icon="lucide:chevron-right" />
+        <Icon name="lucide:chevron-right" class="size-6" />
       </button>
     </DesignPanel>
 

frontend/app/plugins/urql.ts frontend/app/plugins/0.urql.tsfrontend/app/plugins/urql.ts renamed to frontend/app/plugins/0.urql.ts

@@ -0,0 +1,22 @@
+export default defineNuxtPlugin(() => {
+  const { me } = useAuth()
+  const { identify } = useAnalytics()
+
+  watch(
+    () => me.value,
+    (currentMe) => {
+      if (currentMe) {
+        hashUserId(currentMe.id).then((hashedId) => {
+          identify(hashedId, {
+            age_group: getAgeGroup(currentMe.age),
+            gender: currentMe.gender,
+            church_id: currentMe.church.id,
+            church_name: currentMe.church.name,
+            church_country: currentMe.church.country,
+          })
+        })
+      }
+    },
+    { immediate: true },
+  )
+})

frontend/app/plugins/posthog.ts frontend/app/plugins/1.posthog.tsfrontend/app/plugins/posthog.ts renamed to frontend/app/plugins/1.posthog.ts

@@ -1,3 +1,11 @@
+export async function hashUserId(userId: string): Promise<string> {
+  const encoder = new TextEncoder()
+  const data = encoder.encode(userId)
+  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
+  const hashArray = Array.from(new Uint8Array(hashBuffer))
+  return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')
+}
+
 export enum AnalyticsEvent {
   LoginCompleted = 'login_completed',
   LogoutCompleted = 'logout_completed',
@@ -11,3 +19,26 @@ export enum AnalyticsEvent {
   ConsentAccepted = 'consent_accepted',
   ConsentRejected = 'consent_rejected',
 }
+
+export function getAgeGroup(age?: number | null) {
+  if (typeof age != 'number') {
+    return 'UNKNOWN'
+  }
+  if (age < 10) {
+    return '< 10'
+  } else if (age <= 12) {
+    return '10 - 12'
+  } else if (age <= 18) {
+    return '13 - 18'
+  } else if (age <= 25) {
+    return '19 - 25'
+  } else if (age <= 36) {
+    return '26 - 36'
+  } else if (age <= 50) {
+    return '37 - 50'
+  } else if (age <= 64) {
+    return '51 - 64'
+  } else {
+    return '65+'
+  }
+}

frontend/app/plugins/2.analytics.ts

@@ -24,7 +24,11 @@
       "light": "Light",
       "dark": "Dark"
     },
-    "consents": "Consents"
+    "consents": "Consents",
+    "notifications": "Notifications",
+    "notificationsEnabled": "On",
+    "notificationsDisabled": "Off",
+    "addToHomeScreen": "Add app to home screen"
   },
   "standings": {
     "global": "Top 20",

frontend/app/utils/analytics.ts

@@ -24,7 +24,11 @@
       "light": "Lys",
       "dark": "Mørk"
     },
-    "consents": "Samtykke"
+    "consents": "Samtykke",
+    "notifications": "Varslinger",
+    "notificationsEnabled": "På",
+    "notificationsDisabled": "Av",
+    "addToHomeScreen": "Legg til app på hjem skjerm"
   },
   "standings": {
     "global": "Topp 20",