Analytics: add Spindl

package.json

@@ -56,6 +56,7 @@
     "@safe-global/safe-react-components": "^2.0.6",
     "@sentry/react": "^7.74.0",
     "@sentry/tracing": "^7.74.0",
+    "@spindl-xyz/attribution-lite": "^1.4.0",
     "@tkey-mpc/common-types": "^8.2.2",
     "@truffle/hdwallet-provider": "^2.1.4",
     "@walletconnect/utils": "^2.10.2",

src/config/constants.ts

@@ -97,3 +97,6 @@ export const IS_OFFICIAL_HOST = process.env.NEXT_PUBLIC_IS_OFFICIAL_HOST === 'tr
 export const REDEFINE_SIMULATION_URL = 'https://dashboard.redefine.net/reports/'
 export const REDEFINE_API = process.env.NEXT_PUBLIC_REDEFINE_API
 export const REDEFINE_ARTICLE = 'https://safe.mirror.xyz/rInLWZwD_sf7enjoFerj6FIzCYmVMGrrV8Nhg4THdwI'
+
+// Spindl
+export const SPINDL_SDK_KEY = process.env.NEXT_PUBLIC_SPINDL_SDK_KEY || ''

src/services/analytics/index.ts

@@ -11,10 +11,17 @@
  * `import { trackEvent, ADDRESS_BOOK_EVENTS } from '@/services/analytics'`
  * `trackEvent(ADDRESS_BOOK_EVENTS.EXPORT)`
  */
-import { gtmTrack, gtmTrackSafeApp } from './gtm'
+import { gtmInit, gtmTrack, gtmTrackSafeApp } from './gtm'
+import spindlInit from './spindl'
 
 export const trackEvent = gtmTrack
 export const trackSafeAppEvent = gtmTrackSafeApp
 
 export * from './types'
 export * from './events'
+
+// Initialize GTM and Spindl
+if (typeof window !== 'undefined') {
+  gtmInit()
+  spindlInit()
+}

src/services/analytics/spindl.ts

@@ -0,0 +1,11 @@
+import spindl from '@spindl-xyz/attribution-lite'
+import { IS_PRODUCTION, SPINDL_SDK_KEY } from '@/config/constants'
+
+const spindlInit = () => {
+  spindl.configure({
+    sdkKey: SPINDL_SDK_KEY,
+    debugMode: !IS_PRODUCTION,
+  })
+}
+
+export default spindlInit

src/services/analytics/useGtm.ts

@@ -1,12 +1,9 @@
 /**
- * This hook is used to initialize GTM and for anonymized page view tracking.
- * It won't initialize GTM if a consent wasn't given for analytics cookies.
- * The hook needs to be called when the app starts.
+ * Track analytics events using Google Tag Manager
  */
 import { useEffect, useState } from 'react'
 import { useTheme } from '@mui/material/styles'
 import {
-  gtmInit,
   gtmTrackPageview,
   gtmSetChainId,
   gtmEnableCookies,
@@ -39,11 +36,6 @@ const useGtm = () => {
   const safeAddress = useSafeAddress()
   const walletLabel = useWallet()?.label
 
-  // Initialize GTM
-  useEffect(() => {
-    gtmInit()
-  }, [])
-
   // Enable GA cookies if consent was given
   useEffect(() => {
     setPrevAnalytics((prev) => {

yarn.lock

@@ -4164,6 +4164,11 @@
     rpc-websockets "^7.5.1"
     superstruct "^0.14.2"
 
+"@spindl-xyz/attribution-lite@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@spindl-xyz/attribution-lite/-/attribution-lite-1.4.0.tgz#eca26c1fdd4c556ba00bee8c6c799908eceb84e9"
+  integrity sha512-FUOSfMoN+FlLcKZT0rIhcl9QiOo3RN5YDURoXE0IWPjL061hn2BDQyBUuvfxLrG8Tho1eh8K0LkES7viphdTmQ==
+
 "@stablelib/aead@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@stablelib/aead/-/aead-1.0.1.tgz#c4b1106df9c23d1b867eb9b276d8f42d5fc4c0c3"
@@ -16865,4 +16870,4 @@ yocto-queue@^0.1.0:
 zksync-web3@^0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/zksync-web3/-/zksync-web3-0.14.3.tgz#64ac2a16d597464c3fc4ae07447a8007631c57c9"
-  integrity sha512-hT72th4AnqyLW1d5Jlv8N2B/qhEnl2NePK2A3org7tAa24niem/UAaHMkEvmWI3SF9waYUPtqAtjpf+yvQ9zvQ==
+  integrity sha512-hT72th4AnqyLW1d5Jlv8N2B/qhEnl2NePK2A3org7tAa24niem/UAaHMkEvmWI3SF9waYUPtqAtjpf+yvQ9zvQ==