feat: track user's wallet type through user properties

src/services/analytics/TagManager.ts

@@ -102,6 +102,16 @@ const TagManager = {
     // Injected script will remain in memory until new session
     location.reload()
   },
+
+  setUserProperty: (name: string, value: string) => {
+    window.gtag?.('set', 'user_properties', {
+      [name]: value,
+    })
+
+    if (!IS_PRODUCTION) {
+      console.info('[GTM] -', 'set user_properties', name, '=', value)
+    }
+  },
 }
 
 export default TagManager

src/services/analytics/__tests__/TagManager.test.ts

@@ -1,6 +1,7 @@
 import Cookies from 'js-cookie'
 
 import * as gtm from '../TagManager'
+import { AnalyticsUserProperties } from '../types'
 
 const { default: TagManager } = gtm
 
@@ -135,4 +136,28 @@ describe('TagManager', () => {
       expect(global.location.reload).toHaveBeenCalled()
     })
   })
+
+  describe('TagManager.setUserProperty', () => {
+    it('should push new user properties to dataLayer', () => {
+      expect(window.dataLayer).toBeUndefined()
+
+      TagManager.initialize({
+        gtmId: MOCK_ID,
+        auth: MOCK_AUTH,
+        preview: MOCK_PREVIEW,
+      })
+
+      expect(window.dataLayer).toHaveLength(3)
+
+      TagManager.setUserProperty(AnalyticsUserProperties.WALLET_LABEL, 'Safe{Wallet}')
+
+      expect(window.dataLayer).toHaveLength(4)
+
+      expect(Array.from(window.dataLayer?.[3])).toEqual([
+        'set',
+        'user_properties',
+        { [AnalyticsUserProperties.WALLET_LABEL]: 'Safe{Wallet}' },
+      ])
+    })
+  })
 })

src/services/analytics/gtm.ts

@@ -75,6 +75,7 @@ export const gtmInit = (): void => {
 
 export const gtmEnableCookies = TagManager.enableCookies
 export const gtmDisableCookies = TagManager.disableCookies
+export const gtmSetUserProperty = TagManager.setUserProperty
 
 type GtmEvent = {
   event: EventType

src/services/analytics/types.ts

@@ -29,3 +29,7 @@ export enum DeviceType {
   MOBILE = 'mobile',
   TABLET = 'tablet',
 }
+
+export enum AnalyticsUserProperties {
+  WALLET_LABEL = 'walletLabel',
+}

src/services/analytics/useGtm.ts

@@ -13,6 +13,7 @@ import {
   gtmDisableCookies,
   gtmSetDeviceType,
   gtmSetSafeAddress,
+  gtmSetUserProperty,
 } from '@/services/analytics/gtm'
 import { useAppSelector } from '@/store'
 import { CookieType, selectCookies } from '@/store/cookiesSlice'
@@ -21,8 +22,9 @@ import { useRouter } from 'next/router'
 import { AppRoutes } from '@/config/routes'
 import useMetaEvents from './useMetaEvents'
 import { useMediaQuery } from '@mui/material'
-import { DeviceType } from './types'
+import { AnalyticsUserProperties, DeviceType } from './types'
 import useSafeAddress from '@/hooks/useSafeAddress'
+import useWallet from '@/hooks/wallets/useWallet'
 
 const useGtm = () => {
   const chainId = useChainId()
@@ -35,6 +37,7 @@ const useGtm = () => {
   const isTablet = useMediaQuery(theme.breakpoints.down('md'))
   const deviceType = isMobile ? DeviceType.MOBILE : isTablet ? DeviceType.TABLET : DeviceType.DESKTOP
   const safeAddress = useSafeAddress()
+  const walletLabel = useWallet()?.label
 
   // Initialize GTM
   useEffect(() => {
@@ -79,6 +82,12 @@ const useGtm = () => {
     gtmTrackPageview(router.pathname)
   }, [router.pathname])
 
+  useEffect(() => {
+    if (walletLabel) {
+      gtmSetUserProperty(AnalyticsUserProperties.WALLET_LABEL, walletLabel)
+    }
+  }, [walletLabel])
+
   // Track meta events on app load
   useMetaEvents()
 }