Attach safe address to GTM (#2524)

src/services/analytics/gtm.ts

@@ -43,6 +43,7 @@ const GTM_ENV_AUTH: Record<GTMEnvironment, GTMEnvironmentArgs> = {
 const commonEventParams = {
   chainId: '',
   deviceType: DeviceType.DESKTOP,
+  safeAddress: '',
 }
 
 export const gtmSetChainId = (chainId: string): void => {
@@ -53,6 +54,10 @@ export const gtmSetDeviceType = (type: DeviceType): void => {
   commonEventParams.deviceType = type
 }
 
+export const gtmSetSafeAddress = (safeAddress: string): void => {
+  commonEventParams.safeAddress = safeAddress
+}
+
 export const gtmInit = (): void => {
   const GTM_ENVIRONMENT = IS_PRODUCTION ? GTM_ENV_AUTH.LIVE : GTM_ENV_AUTH.DEVELOPMENT
 

src/services/analytics/useGtm.ts

@@ -12,6 +12,7 @@ import {
   gtmEnableCookies,
   gtmDisableCookies,
   gtmSetDeviceType,
+  gtmSetSafeAddress,
 } from '@/services/analytics/gtm'
 import { useAppSelector } from '@/store'
 import { CookieType, selectCookies } from '@/store/cookiesSlice'
@@ -21,6 +22,7 @@ import { AppRoutes } from '@/config/routes'
 import useMetaEvents from './useMetaEvents'
 import { useMediaQuery } from '@mui/material'
 import { DeviceType } from './types'
+import useSafeAddress from '@/hooks/useSafeAddress'
 
 const useGtm = () => {
   const chainId = useChainId()
@@ -32,6 +34,7 @@ const useGtm = () => {
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const isTablet = useMediaQuery(theme.breakpoints.down('md'))
   const deviceType = isMobile ? DeviceType.MOBILE : isTablet ? DeviceType.TABLET : DeviceType.DESKTOP
+  const safeAddress = useSafeAddress()
 
   // Initialize GTM
   useEffect(() => {
@@ -63,6 +66,11 @@ const useGtm = () => {
     gtmSetDeviceType(deviceType)
   }, [deviceType])
 
+  // Set safe address for all GTM events
+  useEffect(() => {
+    gtmSetSafeAddress(safeAddress)
+  }, [safeAddress])
+
   // 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(() => {