feat(safe-apps): Analytics refactor (#1042)

* Refactor analytics for using only the safeAppEvent

* Add pageview tracking to Safe Apps iframe individual apps

src/components/common/CopyButton/index.tsx

@@ -8,12 +8,14 @@ const CopyButton = ({
   className,
   children,
   initialToolTipText = 'Copy to clipboard',
+  onCopy,
 }: {
   text: string
   className?: string
   children?: ReactNode
   initialToolTipText?: string
   ariaLabel?: string
+  onCopy?: () => void
 }): ReactElement => {
   const [tooltipText, setTooltipText] = useState(initialToolTipText)
 
@@ -22,8 +24,9 @@ const CopyButton = ({
       e.preventDefault()
       e.stopPropagation()
       navigator.clipboard.writeText(text).then(() => setTooltipText('Copied'))
+      onCopy?.()
     },
-    [text],
+    [text, onCopy],
   )
 
   const handleMouseLeave = useCallback(() => {

src/components/create-safe/status/useSafeCreationEffects.ts

@@ -5,7 +5,7 @@ import { type UrlObject } from 'url'
 import { pollSafeInfo } from '@/components/create-safe/logic'
 import { AppRoutes } from '@/config/routes'
 import { SafeCreationStatus } from '@/components/create-safe/status/useSafeCreation'
-import { CREATE_SAFE_EVENTS, SAFE_APPS_EVENTS, trackEvent } from '@/services/analytics'
+import { CREATE_SAFE_EVENTS, SAFE_APPS_EVENTS, trackEvent, trackSafeAppEvent } from '@/services/analytics'
 import chains from '@/config/chains'
 import { updateAddressBook } from '../logic/address-book'
 import { useAppDispatch } from '@/store'
@@ -29,7 +29,7 @@ const getRedirect = (chainId: string, safeAddress: string, redirectQuery?: strin
 
   // Track the redirect to Safe App
   if (redirectUrl.includes('apps')) {
-    trackEvent(SAFE_APPS_EVENTS.SHARED_APP_OPEN_AFTER_SAFE_CREATION)
+    trackSafeAppEvent({ ...SAFE_APPS_EVENTS.SHARED_APP_OPEN_AFTER_SAFE_CREATION, label: redirectUrl })
   }
 
   // We're prepending the safe address directly here because the `router.push` doesn't parse

src/components/safe-apps/AddCustomAppModal/CustomApp.tsx

@@ -1,10 +1,11 @@
+import { useCallback } from 'react'
 import type { SafeAppData } from '@gnosis.pm/safe-react-gateway-sdk'
 import { Typography, SvgIcon } from '@mui/material'
 import CheckIcon from '@mui/icons-material/Check'
 
+import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
 import CopyButton from '@/components/common/CopyButton'
 import ShareIcon from '@/public/images/common/share.svg'
-
 import css from './styles.module.css'
 
 type CustomAppProps = {
@@ -13,6 +14,10 @@ type CustomAppProps = {
 }
 
 const CustomApp = ({ safeApp, shareUrl }: CustomAppProps) => {
+  const handleCopy = useCallback(() => {
+    trackSafeAppEvent(SAFE_APPS_EVENTS.COPY_SHARE_URL, safeApp.name)
+  }, [safeApp])
+
   return (
     <div className={css.customAppContainer}>
       <img className={css.customAppIcon} src={safeApp.iconUrl} alt={safeApp.name}></img>
@@ -30,6 +35,7 @@ const CustomApp = ({ safeApp, shareUrl }: CustomAppProps) => {
           className={css.customAppCheckIcon}
           text={shareUrl}
           initialToolTipText={`Copy share URL for ${safeApp.name}`}
+          onCopy={handleCopy}
         >
           <SvgIcon component={ShareIcon} inheritViewBox color="border" fontSize="small" />
         </CopyButton>

src/components/safe-apps/AddCustomAppModal/index.tsx

@@ -22,7 +22,7 @@ import { useCurrentChain } from '@/hooks/useChains'
 import useAsync from '@/hooks/useAsync'
 import useDebounce from '@/hooks/useDebounce'
 import { fetchSafeAppFromManifest } from '@/services/safe-apps/manifest'
-import { SAFE_APPS_EVENTS, trackEvent } from '@/services/analytics'
+import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
 import { isSameUrl, trimTrailingSlash } from '@/utils/url'
 import { AppRoutes } from '@/config/routes'
 import CustomAppPlaceholder from './CustomAppPlaceholder'
@@ -62,7 +62,7 @@ export const AddCustomAppModal = ({ open, onClose, onSave, safeAppsList }: Props
   const onSubmit: SubmitHandler<CustomAppFormData> = (_, __) => {
     if (safeApp) {
       onSave(safeApp)
-      trackEvent(SAFE_APPS_EVENTS.ADD_CUSTOM_APP)
+      trackSafeAppEvent(SAFE_APPS_EVENTS.ADD_CUSTOM_APP, safeApp.url)
       reset()
       onClose()
     }

src/components/safe-apps/AppCard/index.tsx

@@ -1,4 +1,5 @@
 import type { ReactElement, ReactNode, SyntheticEvent } from 'react'
+import { useCallback } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import type { LinkProps } from 'next/link'
@@ -21,6 +22,7 @@ import { useCurrentChain } from '@/hooks/useChains'
 import { SvgIcon } from '@mui/material'
 import type { UrlObject } from 'url'
 import { resolveHref } from 'next/dist/shared/lib/router/router'
+import { SAFE_APPS_EVENTS, trackSafeAppEvent } from '@/services/analytics'
 
 export type SafeAppCardVariants = 'default' | 'compact'
 
@@ -74,16 +76,29 @@ const DeleteButton = ({ safeApp, onDelete }: { safeApp: SafeAppData; onDelete: (
 const ShareButton = ({
   className,
   shareUrl,
-  appName,
+  safeApp,
 }: {
   className?: string
   shareUrl: string
-  appName: string
-}): ReactElement => (
-  <CopyButton text={shareUrl} initialToolTipText={`Copy share URL for ${appName}`} className={className}>
-    <SvgIcon component={ShareIcon} inheritViewBox color="border" fontSize="small" />
-  </CopyButton>
-)
+  safeApp: SafeAppData
+}): ReactElement => {
+  const handleCopy = useCallback(() => {
+    const isCustomApp = safeApp.id < 1
+
+    trackSafeAppEvent(SAFE_APPS_EVENTS.COPY_SHARE_URL, isCustomApp ? safeApp.url : safeApp.name)
+  }, [safeApp])
+
+  return (
+    <CopyButton
+      text={shareUrl}
+      initialToolTipText={`Copy share URL for ${safeApp.name}`}
+      className={className}
+      onCopy={handleCopy}
+    >
+      <SvgIcon component={ShareIcon} inheritViewBox color="border" fontSize="small" />
+    </CopyButton>
+  )
+}
 
 const PinButton = ({
   pinned,
@@ -164,7 +179,7 @@ const CompactAppCard = ({ url, safeApp, onPin, pinned, shareUrl }: CompactSafeAp
       />
 
       {/* Share button */}
-      <ShareButton className={styles.compactShareButton} shareUrl={shareUrl} appName={safeApp.name} />
+      <ShareButton className={styles.compactShareButton} shareUrl={shareUrl} safeApp={safeApp} />
 
       {/* Pin/unpin button */}
       {onPin && (
@@ -218,7 +233,7 @@ const AppCard = ({ safeApp, pinned, onPin, onDelete, variant = 'default' }: AppC
         action={
           <>
             {/* Share button */}
-            <ShareButton shareUrl={shareUrl} appName={safeApp.name} />
+            <ShareButton shareUrl={shareUrl} safeApp={safeApp} />
 
             {/* Pin/unpin button */}
             {onPin && <PinButton pinned={Boolean(pinned)} safeApp={safeApp} onPin={onPin} />}