Analytics: add Spindl (#2842)

* Analytics: add Spindl

* Env var

* Init spindl

.github/workflows/build/action.yml

@@ -49,3 +49,4 @@ runs:
         NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_OPTIONS_STAGING }}
         NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_VAPID_KEY_PRODUCTION }}
         NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FIREBASE_VAPID_KEY_STAGING }}
+        NEXT_PUBLIC_SPINDL_SDK_KEY: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_SPINDL_SDK_KEY }}

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/services/analytics/spindl.ts

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

src/services/analytics/useGtm.ts

@@ -1,7 +1,5 @@
 /**
- * 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'
@@ -16,6 +14,7 @@ import {
   gtmSetUserProperty,
   gtmTrack,
 } from '@/services/analytics/gtm'
+import spindl, { spindlInit } from './spindl'
 import { useAppSelector } from '@/store'
 import { CookieType, selectCookies } from '@/store/cookiesSlice'
 import useChainId from '@/hooks/useChainId'
@@ -41,9 +40,10 @@ const useGtm = () => {
   const safeAddress = useSafeAddress()
   const wallet = useWallet()
 
-  // Initialize GTM
+  // Initialize GTM and Spindl
   useEffect(() => {
     gtmInit()
+    spindlInit()
   }, [])
 
   // Enable GA cookies if consent was given
@@ -90,13 +90,14 @@ const useGtm = () => {
 
   useEffect(() => {
     if (wallet?.label) {
-      gtmSetUserProperty(AnalyticsUserProperties.WALLET_LABEL, wallet?.label)
+      gtmSetUserProperty(AnalyticsUserProperties.WALLET_LABEL, wallet.label)
     }
   }, [wallet?.label])
 
   useEffect(() => {
     if (wallet?.address) {
-      gtmSetUserProperty(AnalyticsUserProperties.WALLET_ADDRESS, wallet?.address)
+      gtmSetUserProperty(AnalyticsUserProperties.WALLET_ADDRESS, wallet.address)
+      spindl.attribute(wallet.address)
     }
   }, [wallet?.address])
 

yarn.lock

@@ -4149,6 +4149,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"