diff --git a/.github/workflows/build/action.yml b/.github/workflows/build/action.yml index 8a8c32e0c1..347a646d4c 100644 --- a/.github/workflows/build/action.yml +++ b/.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 }} diff --git a/package.json b/package.json index 2006aae5ad..0c64369fc7 100644 --- a/package.json +++ b/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", diff --git a/src/services/analytics/spindl.ts b/src/services/analytics/spindl.ts new file mode 100644 index 0000000000..1f5e45d00f --- /dev/null +++ b/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 diff --git a/src/services/analytics/useGtm.ts b/src/services/analytics/useGtm.ts index e8a29a93f8..8c461b293a 100644 --- a/src/services/analytics/useGtm.ts +++ b/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]) diff --git a/yarn.lock b/yarn.lock index 19a4a48596..f23663dc86 100644 --- a/yarn.lock +++ b/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"