feat: integrate display layout tracking and identification in analytics

Author: medyo

src/features/settings/components/GeneralSettings/LayoutSettings.tsx

@@ -7,6 +7,7 @@ import Select, {
   SingleValueProps,
   components,
 } from 'react-select'
+import { identifyDisplayLayout, trackDisplayTypeChange } from 'src/lib/analytics'
 import { useUserPreferences } from 'src/stores/preferences'
 import { Layout } from 'src/types'
 
@@ -50,6 +51,8 @@ export const LayoutSettings = () => {
     }
 
     setLayout(selectedOption.value)
+    identifyDisplayLayout(selectedOption.value)
+    trackDisplayTypeChange(selectedOption.value)
   }
 
   const getDefaultValue = (): LayoutOption | undefined => {

src/lib/analytics.ts

@@ -21,6 +21,7 @@ enum Objects {
   ONBOARDING = 'Onboarding',
   RSS = 'Rss',
   DO_NOT_DISTURB = 'DND',
+  DISPLAY_LAYOUT = 'Display Layout',
 }
 
 enum Verbs {
@@ -74,6 +75,7 @@ export enum Attributes {
   PROVIDER = 'Provider',
   ADV = 'ADV',
   STREAK = 'Streak',
+  DISPLAY_LAYOUT = 'Display Layout',
 }
 
 const _SEP_ = ' '
@@ -102,6 +104,7 @@ export const setupIdentification = () => {
     openLinksNewTab,
     promptEngine,
     maxVisibleCards,
+    layout,
   } = useUserPreferences.getState()
 
   identifyUserProperty(Attributes.RESOLUTION, getScreenResolution())
@@ -112,6 +115,7 @@ export const setupIdentification = () => {
   identifyUserSearchEngine(promptEngine)
   identifyUserLinksInNewTab(openLinksNewTab)
   identifyUserMaxVisibleCards(maxVisibleCards)
+  identifyDisplayLayout(layout)
   if (onboardingResult?.title) {
     identifyUserOccupation(onboardingResult.title)
   }
@@ -403,6 +407,16 @@ export const trackUserDelete = () => {
   })
 }
 
+export const trackDisplayTypeChange = (value: "grid" | "cards") => {
+  trackEvent({
+    object: Objects.DISPLAY_LAYOUT,
+    verb: Verbs.CHANGE, 
+    attributes: {
+      [Attributes.DISPLAY_LAYOUT]: value,
+    },
+  })
+}
+
 // Identification
 
 export const identifyUserLanguages = (languages: string[]) => {
@@ -438,6 +452,9 @@ export const identifyAdvBlocked = (blocked: boolean) => {
 export const identifyUserStreak = (value: number) => {
   identifyUserProperty(Attributes.STREAK, value)
 }
+export const identifyDisplayLayout = (value: "grid" | "cards") => {
+  identifyUserProperty(Attributes.DISPLAY_LAYOUT, value)
+}
 // Private functions
 type trackEventProps = {
   object: Exclude<Objects, null | undefined>