2221491027

Committed 25 Apr 2022 04:26PM UTC coverage: 35.774% (+0.1%) from 35.663%

Build Type

push

github

Committed by Daniel Sanchez

Commit Message

Merge branch 'dev' into mergeback-dev-v3.24.1

Run Details

1266 of 4471 branches covered (28.32%)

Branch coverage included in aggregate %.

71 of 196 new or added lines in 36 files covered. (36.22%)

345 existing lines in 34 files now uncovered.

3566 of 9036 relevant lines covered (39.46%)

36.12 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

62.96

/src/utils/googleTagManager.ts

import { useEffect } from 'react'
import TagManager, { TagManagerArgs } from 'react-gtm-module'
import { matchPath } from 'react-router-dom'
import { Location } from 'history'
import { useSelector } from 'react-redux'

import { ADDRESSED_ROUTE, history, SAFE_ADDRESS_SLUG, SAFE_ROUTES, TRANSACTION_ID_SLUG } from 'src/routes/routes'
import {
  GOOGLE_TAG_MANAGER_ID,
  GOOGLE_TAG_MANAGER_AUTH_LIVE,
  GOOGLE_TAG_MANAGER_AUTH_LATEST,
  IS_PRODUCTION,
  GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH,
} from 'src/utils/constants'
import { _getChainId } from 'src/config'
import { currentChainId } from 'src/logic/config/store/selectors'
import { Cookie, removeCookies } from 'src/logic/cookies/utils'
import { SafeApp } from 'src/routes/safe/components/Apps/types'
import { EMPTY_SAFE_APP } from 'src/routes/safe/components/Apps/utils'

export const getAnonymizedLocation = ({ pathname, search, hash }: Location = history.location): string => {
  const ANON_SAFE_ADDRESS = 'SAFE_ADDRESS'
  const ANON_TX_ID = 'TRANSACTION_ID'

  let anonPathname = pathname

  // Anonymize safe address
  const safeAddressMatch = matchPath(pathname, { path: ADDRESSED_ROUTE })
  if (safeAddressMatch) {
    anonPathname = anonPathname.replace(safeAddressMatch.params[SAFE_ADDRESS_SLUG], ANON_SAFE_ADDRESS)
  }

  // Anonymise transaction id
  const txIdMatch = matchPath(pathname, { path: SAFE_ROUTES.TRANSACTIONS_SINGULAR })
  if (txIdMatch) {
    anonPathname = anonPathname.replace(txIdMatch.params[TRANSACTION_ID_SLUG], ANON_TX_ID)
  }

  return anonPathname + search + hash
}

type GTMEnvironment = 'LIVE' | 'LATEST' | 'DEVELOPMENT'
type GTMEnvironmentArgs = Required<Pick<TagManagerArgs, 'auth' | 'preview'>>

const GTM_ENV_AUTH: Record<GTMEnvironment, GTMEnvironmentArgs> = {
  LIVE: {
    auth: GOOGLE_TAG_MANAGER_AUTH_LIVE,
    preview: 'env-1',
  },
  LATEST: {
    auth: GOOGLE_TAG_MANAGER_AUTH_LATEST,
    preview: 'env-2',
  },
  DEVELOPMENT: {
    auth: GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH,
    preview: 'env-3',
  },
}

export enum GTM_EVENT {
  PAGEVIEW = 'pageview',
  CLICK = 'customClick',
  META = 'metadata',
  SAFE_APP = 'safeApp',
}

let currentPathname = history.location.pathname
export const loadGoogleTagManager = (): void => {
  const GTM_ENVIRONMENT = IS_PRODUCTION ? GTM_ENV_AUTH.LIVE : GTM_ENV_AUTH.DEVELOPMENT

  if (!GOOGLE_TAG_MANAGER_ID || !GTM_ENVIRONMENT.auth) {
    console.warn('[GTM] - Unable to initialize Google Tag Manager. `id` or `gtm_auth` missing.')
    return
  }

  // Cache name to prevent tracking of same page
  currentPathname = history.location.pathname

  const page = getAnonymizedLocation()

  TagManager.initialize({
    gtmId: GOOGLE_TAG_MANAGER_ID,
    ...GTM_ENVIRONMENT,
    dataLayer: {
      // Must emit (custom) event in order to trigger page tracking
      event: GTM_EVENT.PAGEVIEW,
      chainId: _getChainId(),
      page,
      // Allow only GA4 configuration and GA4 custom event tags
      // @see https://developers.google.com/tag-platform/tag-manager/web/restrict
      'gtm.allowlist': ['gaawc', 'gaawe'],
      // Block JS variables and custom scripts
      'gtm.blocklist': ['j', 'jsm', 'customScripts'],
    },
  })
}

export const unloadGoogleTagManager = (): void => {
  if (!window.dataLayer) {
    return
  }

  const GOOGLE_ANALYTICS_COOKIE_LIST: Cookie[] = [
    { name: '_ga', path: '/' },
    { name: '_gat', path: '/' },
    { name: '_gid', path: '/' },
  ]

  removeCookies(GOOGLE_ANALYTICS_COOKIE_LIST)
}

export const usePageTracking = (): void => {
  const chainId = useSelector(currentChainId)

  useEffect(() => {
    const unsubscribe = history.listen((location) => {
      if (location.pathname === currentPathname) {
        return
      }

      currentPathname = location.pathname

      TagManager.dataLayer({
        dataLayer: {
          // Must emit (custom) event in order to trigger page tracking
          event: GTM_EVENT.PAGEVIEW,
          chainId,
          page: getAnonymizedLocation(location),
          // Clear dataLayer
          eventCategory: undefined,
          eventAction: undefined,
          eventLabel: undefined,
        },
      })
    })

    return () => {
      unsubscribe()
    }
  }, [chainId])
}

export type EventLabel = string | number | boolean | null
const tryParse = (value?: EventLabel): EventLabel | undefined => {
  if (typeof value !== 'string') {
    return value
  }
  try {
    return JSON.parse(value)
  } catch {
    return value
  }
}

type EventDataLayer = {
  event: GTM_EVENT
  chainId: string
  eventCategory: string
  eventAction: string
  eventLabel?: EventLabel
}

export const trackEvent = ({
  event,
  category,
  action,
  label,
}: {
  event: GTM_EVENT
  category: string
  action: string
  label?: EventLabel
}): void => {
  const dataLayer: EventDataLayer = {
    event,
    chainId: _getChainId(),
    eventCategory: category,
    eventAction: action,
    eventLabel: tryParse(label),
  }

  track(dataLayer)
}

type SafeAppEventDataLayer = {
  event: GTM_EVENT.SAFE_APP
  chainId: string
  safeAppName: string
  safeAppMethod: string
  safeAppEthMethod?: string
  safeAppSDKVersion?: string
}

export const getSafeAppName = (safeApp?: SafeApp): string => {
  if (!safeApp?.id) {
    return EMPTY_SAFE_APP
  }

  try {
    const parsedSafeApp = JSON.parse(safeApp.id)

    return parsedSafeApp.name || parsedSafeApp.url
  } catch (error) {
    return EMPTY_SAFE_APP
  }
}

export const trackSafeAppMessage = ({
  app,
  method,
  params,
  sdkVersion,
}: {
  app?: SafeApp
  method: string
  params?: any
  sdkVersion?: string
}): void => {
  const dataLayer: SafeAppEventDataLayer = {
    event: GTM_EVENT.SAFE_APP,
    chainId: _getChainId(),
    safeAppName: getSafeAppName(app),
    safeAppMethod: method,
    safeAppEthMethod: params?.call,
    safeAppSDKVersion: sdkVersion,
  }

  track(dataLayer)
}

function track(dataLayer: EventDataLayer | SafeAppEventDataLayer) {
  if (!IS_PRODUCTION) {
    console.info('[GTM]', dataLayer)
  }

  TagManager.dataLayer({
    dataLayer,
  })
}

1	import { useEffect } from 'react'
2	import TagManager, { TagManagerArgs } from 'react-gtm-module'
3	import { matchPath } from 'react-router-dom'
4	import { Location } from 'history'
5	import { useSelector } from 'react-redux'
6
7	import { ADDRESSED_ROUTE, history, SAFE_ADDRESS_SLUG, SAFE_ROUTES, TRANSACTION_ID_SLUG } from 'src/routes/routes'
8	import {
9	GOOGLE_TAG_MANAGER_ID,
10	GOOGLE_TAG_MANAGER_AUTH_LIVE,
11	GOOGLE_TAG_MANAGER_AUTH_LATEST,
12	IS_PRODUCTION,
13	GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH,
14	} from 'src/utils/constants'
15	import { _getChainId } from 'src/config'
16	import { currentChainId } from 'src/logic/config/store/selectors'
17	import { Cookie, removeCookies } from 'src/logic/cookies/utils'
18	import { SafeApp } from 'src/routes/safe/components/Apps/types'
19	import { EMPTY_SAFE_APP } from 'src/routes/safe/components/Apps/utils'
20
21	export const getAnonymizedLocation = ({ pathname, search, hash }: Location = history.location): string => {	42✔
22	const ANON_SAFE_ADDRESS = 'SAFE_ADDRESS'	4✔
23	const ANON_TX_ID = 'TRANSACTION_ID'	4✔
24
25	let anonPathname = pathname	4✔
26
27	// Anonymize safe address
28	const safeAddressMatch = matchPath(pathname, { path: ADDRESSED_ROUTE })	4✔
29	if (safeAddressMatch) {	4✔
30	anonPathname = anonPathname.replace(safeAddressMatch.params[SAFE_ADDRESS_SLUG], ANON_SAFE_ADDRESS)	3✔
31	}
32
33	// Anonymise transaction id
34	const txIdMatch = matchPath(pathname, { path: SAFE_ROUTES.TRANSACTIONS_SINGULAR })	4✔
35	if (txIdMatch) {	4✔
36	anonPathname = anonPathname.replace(txIdMatch.params[TRANSACTION_ID_SLUG], ANON_TX_ID)	3✔
37	}
38
39	return anonPathname + search + hash	4✔
40	}
41
42	type GTMEnvironment = 'LIVE' \| 'LATEST' \| 'DEVELOPMENT'
43	type GTMEnvironmentArgs = Required<Pick<TagManagerArgs, 'auth' \| 'preview'>>
44
45	const GTM_ENV_AUTH: Record<GTMEnvironment, GTMEnvironmentArgs> = {	42✔
46	LIVE: {
47	auth: GOOGLE_TAG_MANAGER_AUTH_LIVE,
48	preview: 'env-1',
49	},
50	LATEST: {
51	auth: GOOGLE_TAG_MANAGER_AUTH_LATEST,
52	preview: 'env-2',
53	},
54	DEVELOPMENT: {
55	auth: GOOGLE_TAG_MANAGER_DEVELOPMENT_AUTH,
56	preview: 'env-3',
57	},
58	}
59
60	export enum GTM_EVENT {
61	PAGEVIEW = 'pageview',
62	CLICK = 'customClick',
63	META = 'metadata',
64	SAFE_APP = 'safeApp',
65	}
66
67	let currentPathname = history.location.pathname	42✔
68	export const loadGoogleTagManager = (): void => {	42✔
69	const GTM_ENVIRONMENT = IS_PRODUCTION ? GTM_ENV_AUTH.LIVE : GTM_ENV_AUTH.DEVELOPMENT	2!
70
71	if (!GOOGLE_TAG_MANAGER_ID \|\| !GTM_ENVIRONMENT.auth) {	2✔
72	console.warn('[GTM] - Unable to initialize Google Tag Manager. `id` or `gtm_auth` missing.')	1✔
73	return	1✔
74	}
75
76	// Cache name to prevent tracking of same page
77	currentPathname = history.location.pathname	1✔
78
79	const page = getAnonymizedLocation()	1✔
80
81	TagManager.initialize({	1✔
82	gtmId: GOOGLE_TAG_MANAGER_ID,
83	...GTM_ENVIRONMENT,
84	dataLayer: {
85	// Must emit (custom) event in order to trigger page tracking
86	event: GTM_EVENT.PAGEVIEW,
87	chainId: _getChainId(),
88	page,
89	// Allow only GA4 configuration and GA4 custom event tags
90	// @see https://developers.google.com/tag-platform/tag-manager/web/restrict
91	'gtm.allowlist': ['gaawc', 'gaawe'],
92	// Block JS variables and custom scripts
93	'gtm.blocklist': ['j', 'jsm', 'customScripts'],
94	},
95	})
96	}
97
98	export const unloadGoogleTagManager = (): void => {	42✔
UNCOV 99	if (!window.dataLayer) {	×
UNCOV 100	return	×
101	}
102
UNCOV 103	const GOOGLE_ANALYTICS_COOKIE_LIST: Cookie[] = [	×
104	{ name: '_ga', path: '/' },
105	{ name: '_gat', path: '/' },
106	{ name: '_gid', path: '/' },
107	]
108
UNCOV 109	removeCookies(GOOGLE_ANALYTICS_COOKIE_LIST)	×
110	}
111
112	export const usePageTracking = (): void => {	42✔
113	const chainId = useSelector(currentChainId)	2✔
114
UNCOV 115	useEffect(() => {	×
UNCOV 116	const unsubscribe = history.listen((location) => {	×
117	if (location.pathname === currentPathname) {	×
UNCOV 118	return	×
119	}
120
UNCOV 121	currentPathname = location.pathname	×
122
123	TagManager.dataLayer({	×
124	dataLayer: {
125	// Must emit (custom) event in order to trigger page tracking
126	event: GTM_EVENT.PAGEVIEW,
127	chainId,
128	page: getAnonymizedLocation(location),
129	// Clear dataLayer
130	eventCategory: undefined,
131	eventAction: undefined,
132	eventLabel: undefined,
133	},
134	})
135	})
136
UNCOV 137	return () => {	×
UNCOV 138	unsubscribe()	×
139	}
140	}, [chainId])
141	}
142
143	export type EventLabel = string \| number \| boolean \| null
144	const tryParse = (value?: EventLabel): EventLabel \| undefined => {	42✔
145	if (typeof value !== 'string') {	91✔
146	return value	85✔
147	}
148	try {	6✔
149	return JSON.parse(value)	6✔
150	} catch {
151	return value	6✔
152	}
153	}
154
155	type EventDataLayer = {
156	event: GTM_EVENT
157	chainId: string
158	eventCategory: string
159	eventAction: string
160	eventLabel?: EventLabel
161	}
162
163	export const trackEvent = ({	42✔
164	event,
165	category,
166	action,
167	label,
168	}: {
169	event: GTM_EVENT
170	category: string
171	action: string
172	label?: EventLabel
173	}): void => {
174	const dataLayer: EventDataLayer = {	91✔
175	event,
176	chainId: _getChainId(),
177	eventCategory: category,
178	eventAction: action,
179	eventLabel: tryParse(label),
180	}
181
182	track(dataLayer)	91✔
183	}
184
185	type SafeAppEventDataLayer = {
186	event: GTM_EVENT.SAFE_APP
187	chainId: string
188	safeAppName: string
189	safeAppMethod: string
190	safeAppEthMethod?: string
191	safeAppSDKVersion?: string
192	}
193
194	export const getSafeAppName = (safeApp?: SafeApp): string => {	42✔
NEW 195	if (!safeApp?.id) {	×
NEW 196	return EMPTY_SAFE_APP	×
197	}
198
NEW 199	try {	×
NEW 200	const parsedSafeApp = JSON.parse(safeApp.id)	×
201
NEW 202	return parsedSafeApp.name \|\| parsedSafeApp.url	×
203	} catch (error) {
NEW 204	return EMPTY_SAFE_APP	×
205	}
206	}
207
208	export const trackSafeAppMessage = ({	42✔
209	app,
210	method,
211	params,
212	sdkVersion,
213	}: {
214	app?: SafeApp
215	method: string
216	params?: any
217	sdkVersion?: string
218	}): void => {
NEW 219	const dataLayer: SafeAppEventDataLayer = {	×
220	event: GTM_EVENT.SAFE_APP,
221	chainId: _getChainId(),
222	safeAppName: getSafeAppName(app),
223	safeAppMethod: method,
224	safeAppEthMethod: params?.call,
225	safeAppSDKVersion: sdkVersion,
226	}
227
NEW 228	track(dataLayer)	×
229	}
230
231	function track(dataLayer: EventDataLayer \| SafeAppEventDataLayer) {
232	if (!IS_PRODUCTION) {	91!
233	console.info('[GTM]', dataLayer)	91✔
234	}
235
236	TagManager.dataLayer({	91✔
237	dataLayer,
238	})
239	}

safe-global / safe-react / 2221491027

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous