Update events to use ga events

src/components/posts/view-post/PostDropDownMenu.tsx

@@ -7,7 +7,7 @@ import { editPostUrl } from 'src/components/urls'
 import { ViewOnIpfs } from 'src/components/utils'
 import { ButtonLink } from 'src/components/utils/CustomLinks'
 import { DropdownMenu } from 'src/components/utils/DropDownMenu'
-import { useSendGaUserEvent } from 'src/ga'
+import { useSendEvent } from 'src/providers/AnalyticContext'
 import { idToBn, PostData, SpaceStruct } from 'src/types'
 import { ReactionModal } from '.'
 import { useIsMyAddress, useMyAddress } from '../../auth/MyAccountsContext'
@@ -26,7 +26,7 @@ const InnerPostDropDownMenu: FC<DropdownProps> = props => {
   const myAddress = useMyAddress()
   const { struct } = post
   const postId = struct.id
-  const sendGaEvent = useSendGaUserEvent()
+  const sendEvent = useSendEvent()
 
   const { canEditPost, canHidePost, canMovePost } = useCheckCanEditAndHideSpacePermission(props)
 
@@ -36,7 +36,7 @@ const InnerPostDropDownMenu: FC<DropdownProps> = props => {
   }
 
   const buildMenuItems = useCallback(() => {
-    sendGaEvent('Open post dropdown menu')
+    sendEvent('Open post dropdown menu')
 
     return (
       <>

src/components/search/SearchInput.tsx

@@ -4,7 +4,7 @@ import BN from 'bn.js'
 import clsx from 'clsx'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import { useSendGaUserEvent } from 'src/ga'
+import { useSendEvent } from 'src/providers/AnalyticContext'
 import { SpaceWithSomeDetails } from 'src/types'
 import { useSelectSpace } from '../../rtk/features/spaces/spacesHooks'
 import useSubsocialEffect from '../api/useSubsocialEffect'
@@ -52,7 +52,7 @@ const SearchInput = () => {
   const [withSpaceFilter, setWithSpaceFilter] = useState<boolean>(true)
   const [spaceId, setSpaceId] = useState<string>()
   const isSearchPage = router.pathname.includes('search')
-  const sendGaEvent = useSendGaUserEvent()
+  const sendEvent = useSendEvent()
 
   const spaceIdOrHandle = router.query?.spaceId as string | undefined
 
@@ -97,7 +97,7 @@ const SearchInput = () => {
       },
     }
 
-    sendGaEvent(`Search for ${value}`)
+    sendEvent('Search', { value })
     return nonEmptyStr(value) && router.replace(queryPath, queryPath)
   }
 

src/components/spaces/helpers/SpaceDropdownMenu.tsx

@@ -5,8 +5,8 @@ import { editSpaceUrl } from 'src/components/urls'
 import { isHidden, ViewOnIpfs } from 'src/components/utils'
 import { BasicDropDownMenuProps, DropdownMenu } from 'src/components/utils/DropDownMenu'
 import { showSuccessMessage } from 'src/components/utils/Message'
-import { useSendGaUserEvent } from 'src/ga'
 import { useHasUserASpacePermission } from 'src/permissions/checkPermission'
+import { useSendEvent } from 'src/providers/AnalyticContext'
 import { SpaceData } from 'src/types'
 import { useSelectProfile } from '../../../rtk/features/profiles/profilesHooks'
 import { useIsUsingEmail, useMyAddress } from '../../auth/MyAccountsContext'
@@ -39,10 +39,10 @@ export const SpaceDropdownMenu = (props: SpaceDropDownProps) => {
 
   const showMakeAsProfileButton = isMySpace && (!profileSpaceId || profileSpaceId !== id)
 
-  const sendGaEvent = useSendGaUserEvent()
+  const sendEvent = useSendEvent()
 
   const buildMenuItems = () => {
-    sendGaEvent('Open space dropdown menu')
+    sendEvent('Open space dropdown menu')
 
     return (
       <>

src/components/substrate/SubstrateTxButton.tsx

@@ -14,10 +14,10 @@ import { isFunction } from '@polkadot/util'
 import type { Signer } from '@polkadot/api/types'
 import { VoidFn } from '@polkadot/api/types'
 import { isEmptyStr, newLogger } from '@subsocial/utils'
-import { useCreateSendGaUserEvent } from 'src/ga'
 import useExternalStorage from 'src/hooks/useExternalStorage'
 import useSignerExternalStorage from 'src/hooks/useSignerExternalStorage'
 import messages from 'src/messages'
+import { useBuildSendEvent } from 'src/providers/AnalyticContext'
 import { useOpenCloseOnBoardingModal } from 'src/rtk/features/onBoarding/onBoardingHooks'
 import { AnyAccountId } from 'src/types'
 import { useSubstrate } from '.'
@@ -148,7 +148,7 @@ function TxButton({
 
   const api = customNodeApi || subsocialApi
 
-  const sendGaEvent = useCreateSendGaUserEvent(`Create tx: ${tx}`)
+  const sendTxEvent = useBuildSendEvent('Create tx')
 
   const waitMessage = controlledMessage({
     message: messages.waitingForTx,
@@ -269,7 +269,7 @@ function TxButton({
       onFailedHandler,
     )
     waitMessage.open()
-    sendGaEvent()
+    sendTxEvent({ tx })
   }
 
   const signWithExtension = async (
@@ -308,7 +308,7 @@ function TxButton({
       unsub = await tx.send(onSuccessHandler)
 
       waitMessage.open()
-      sendGaEvent()
+      sendTxEvent({ tx })
     } catch (err: any) {
       onFailedHandler(err instanceof Error ? err.message : err)
     }

src/ga/index.ts

@@ -1,5 +1,4 @@
 export * from './category'
-export * from './events'
 import ReactGA from 'react-ga'
 import { isServerSide } from 'src/components/utils'
 import { openCookiesNotification } from '../components/cookies'

src/providers/AnalyticContext.tsx

@@ -22,7 +22,7 @@ const initialState: AnalyticContextState = {
 }
 
 export type AnalyticContextProps = {
-  sendEvent: (name: string) => void
+  sendEvent: (name: string, properties?: Record<string, any>) => void
 }
 
 const propsStub = { sendEvent: () => undefined }
@@ -72,10 +72,11 @@ export function AnalyticProvider(props: React.PropsWithChildren<{}>) {
 
   const contextValue: AnalyticContextProps = useMemo(() => {
     return {
-      sendEvent: (name: string) => {
+      sendEvent: (name: string, properties?: Record<string, any>) => {
         const eventProps = {
           event_type: name,
           device_id: state.deviceId,
+          ...properties,
         }
         if (!state.amp) {
           setQueuedEvents(prev => [...prev, eventProps])
@@ -96,9 +97,12 @@ export function useSendEvent() {
 export function useBuildSendEvent(eventName: string) {
   const sendEvent = useSendEvent()
 
-  return useCallback(() => {
-    sendEvent(eventName)
-  }, [eventName])
+  return useCallback(
+    (properties?: Record<string, any>) => {
+      sendEvent(eventName, properties)
+    },
+    [eventName],
+  )
 }
 
 export default AnalyticProvider