Feat: send deviceType to GTM (#2430)

src/services/analytics/gtm.ts

@@ -17,7 +17,7 @@ import {
   GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH,
 } from '@/config/constants'
 import type { AnalyticsEvent, EventLabel, SafeAppSDKEvent } from './types'
-import { EventType } from './types'
+import { EventType, DeviceType } from './types'
 import { SAFE_APPS_SDK_CATEGORY } from './events'
 import { getAbTest } from '../tracking/abTesting'
 import type { AbTest } from '../tracking/abTesting'
@@ -40,10 +40,17 @@ const GTM_ENV_AUTH: Record<GTMEnvironment, GTMEnvironmentArgs> = {
   },
 }
 
-let _chainId: string = ''
+const commonEventParams = {
+  chainId: '',
+  deviceType: DeviceType.DESKTOP,
+}
 
 export const gtmSetChainId = (chainId: string): void => {
-  _chainId = chainId
+  commonEventParams.chainId = chainId
+}
+
+export const gtmSetDeviceType = (type: DeviceType): void => {
+  commonEventParams.deviceType = type
 }
 
 export const gtmInit = (): void => {
@@ -66,6 +73,7 @@ export const gtmDisableCookies = TagManager.disableCookies
 type GtmEvent = {
   event: EventType
   chainId: string
+  deviceType: DeviceType
   abTest?: AbTest
 }
 
@@ -92,8 +100,8 @@ const gtmSend = TagManager.dataLayer
 
 export const gtmTrack = (eventData: AnalyticsEvent): void => {
   const gtmEvent: ActionGtmEvent = {
+    ...commonEventParams,
     event: eventData.event || EventType.CLICK,
-    chainId: _chainId,
     eventCategory: eventData.category,
     eventAction: eventData.action,
   }
@@ -122,8 +130,8 @@ export const gtmTrack = (eventData: AnalyticsEvent): void => {
 
 export const gtmTrackPageview = (pagePath: string): void => {
   const gtmEvent: PageviewGtmEvent = {
+    ...commonEventParams,
     event: EventType.PAGEVIEW,
-    chainId: _chainId,
     pageLocation: `${location.origin}${pagePath}`,
     pagePath,
   }
@@ -142,8 +150,8 @@ export const normalizeAppName = (appName?: string): string => {
 
 export const gtmTrackSafeApp = (eventData: AnalyticsEvent, appName?: string, sdkEventData?: SafeAppSDKEvent): void => {
   const safeAppGtmEvent: SafeAppGtmEvent = {
+    ...commonEventParams,
     event: EventType.SAFE_APP,
-    chainId: _chainId,
     eventCategory: eventData.category,
     eventAction: eventData.action,
     safeAppName: normalizeAppName(appName),

src/services/analytics/types.ts

@@ -22,3 +22,9 @@ export type SafeAppSDKEvent = {
   ethMethod: string
   version: string
 }
+
+export enum DeviceType {
+  DESKTOP = 'desktop',
+  MOBILE = 'mobile',
+  TABLET = 'tablet',
+}

src/services/analytics/useGtm.ts

@@ -4,20 +4,34 @@
  * The hook needs to be called when the app starts.
  */
 import { useEffect, useState } from 'react'
-import { gtmInit, gtmTrackPageview, gtmSetChainId, gtmEnableCookies, gtmDisableCookies } from '@/services/analytics/gtm'
+import { useTheme } from '@mui/material/styles'
+import {
+  gtmInit,
+  gtmTrackPageview,
+  gtmSetChainId,
+  gtmEnableCookies,
+  gtmDisableCookies,
+  gtmSetDeviceType,
+} from '@/services/analytics/gtm'
 import { useAppSelector } from '@/store'
 import { CookieType, selectCookies } from '@/store/cookiesSlice'
 import useChainId from '@/hooks/useChainId'
 import { useRouter } from 'next/router'
 import { AppRoutes } from '@/config/routes'
 import useMetaEvents from './useMetaEvents'
+import { useMediaQuery } from '@mui/material'
+import { DeviceType } from './types'
 
 const useGtm = () => {
   const chainId = useChainId()
   const cookies = useAppSelector(selectCookies)
   const isAnalyticsEnabled = cookies[CookieType.ANALYTICS] || false
   const [, setPrevAnalytics] = useState(isAnalyticsEnabled)
   const router = useRouter()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+  const isTablet = useMediaQuery(theme.breakpoints.down('md'))
+  const deviceType = isMobile ? DeviceType.MOBILE : isTablet ? DeviceType.TABLET : DeviceType.DESKTOP
 
   // Initialize GTM
   useEffect(() => {
@@ -39,11 +53,16 @@ const useGtm = () => {
     })
   }, [isAnalyticsEnabled])
 
-  // Set the chain ID for GTM
+  // Set the chain ID for all GTM events
   useEffect(() => {
     gtmSetChainId(chainId)
   }, [chainId])
 
+  // Set device type for all GTM events
+  useEffect(() => {
+    gtmSetDeviceType(deviceType)
+  }, [deviceType])
+
   // Track page views – anononimized by default.
   // Sensitive info, like the safe address or tx id, is always in the query string, which we DO NOT track.
   useEffect(() => {