🔧 Added tracking to AMM start, added marketplace tabs track (#6241)

Joystream · May 7, 2024 · ed70dc7 · ed70dc7
1 parent 8a9e71e
commit ed70dc7
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/packages/atlas/src/components/_crt/SaleMarketChoiceDrawer/SaleMarketChoiceDrawer.tsx b/packages/atlas/src/components/_crt/SaleMarketChoiceDrawer/SaleMarketChoiceDrawer.tsx
@@ -66,7 +66,7 @@ export const SaleMarketChoiceDrawer = ({ isOpen, onClose, onMarketChoice }: Sale
             <FlexBox flow={smMatch ? 'row' : 'column'} alignItems="strech" width="100%" gap={6}>
               <OptionCard
                 title="Public Sale"
-                titleAccessory={<Pill label="Comming soon" variant="warning" />}
+                titleAccessory={<Pill label="Coming soon" variant="warning" />}
                 description="Raise funding by selling a certain number of tokens to the public at a set price over a certain period."
                 points={SALE_POINTS}
                 actionButton={{

diff --git a/packages/atlas/src/components/_crt/StartMarketModal/StartMarketModal.tsx b/packages/atlas/src/components/_crt/StartMarketModal/StartMarketModal.tsx
@@ -12,6 +12,7 @@ import { SuccessActionModalTemplate } from '@/components/_crt/SuccessActionModal
 import { DialogModal } from '@/components/_overlays/DialogModal'
 import { absoluteRoutes } from '@/config/routes'
 import { useClipboard } from '@/hooks/useClipboard'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { HAPI_TO_JOY_RATE } from '@/joystream-lib/config'
 import { hapiBnToTokenNumber } from '@/joystream-lib/utils'
 import { useFee, useJoystream } from '@/providers/joystream'
@@ -38,6 +39,7 @@ export const StartMarketModal = ({ onClose, show, tokenId }: StartMarketModalPro
   const { displaySnackbar } = useSnackbar()
   const handleTransaction = useTransaction()
   const { refetchCreatorTokenData } = useNetworkUtils()
+  const { trackAMMStarted } = useSegmentAnalytics()
   const { data } = useGetFullCreatorTokenQuery({
     variables: {
       id: tokenId ?? '',
@@ -80,6 +82,7 @@ export const StartMarketModal = ({ onClose, show, tokenId }: StartMarketModalPro
       txFactory: async (updateStatus) =>
         (await joystream.extrinsics).startAmm(memberId, channelId, joySlopeNumber, proxyCallback(updateStatus)),
       onTxSync: async () => {
+        trackAMMStarted(tokenId, creatorTokenById?.symbol ?? 'N/A', channelId ?? 'N/A')
         setShowSuccessModal(true)
       },
       onError: () => {
@@ -97,14 +100,17 @@ export const StartMarketModal = ({ onClose, show, tokenId }: StartMarketModalPro
     })
   }, [
     channelId,
+    creatorTokenById?.symbol,
     displaySnackbar,
     handleTransaction,
     joySlopeNumber,
     joystream,
     memberId,
     onClose,
     proxyCallback,
+    tokenId,
     tokenPrice,
+    trackAMMStarted,
   ])
 
   const successDetails = useMemo(

diff --git a/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx b/packages/atlas/src/views/viewer/MarketplaceView/MarketplaceView.tsx
@@ -4,6 +4,7 @@ import { useSearchParams } from 'react-router-dom'
 import { SvgActionCreatorToken, SvgActionPlay } from '@/assets/icons'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 import { useMountEffect } from '@/hooks/useMountEffect'
+import { useSegmentAnalytics } from '@/hooks/useSegmentAnalytics'
 import { StyledPageTabs } from '@/views/viewer/PortfolioView'
 
 import { MarketplaceWrapper } from './MarketplaceView.styles'
@@ -30,18 +31,24 @@ const getTabIndex = (tabName: TabsNames, allTabs: typeof TABS): number =>
 export const MarketplaceView: FC = () => {
   const smMatch = useMediaMatch('sm')
   const [searchParams, setSearchParams] = useSearchParams()
+  const { trackPageView } = useSegmentAnalytics()
   const currentTabName = searchParams.get('tab') as (typeof TABS)[number]['name'] | null
   const currentTab = currentTabName ? getTabIndex(currentTabName, TABS) : 0
 
   useMountEffect(() => {
-    if (currentTab === -1) setSearchParams({ 'tab': '0' }, { replace: true })
+    if (currentTab === -1) {
+      setSearchParams({ 'tab': '0' }, { replace: true })
+    } else {
+      trackPageView(`${TABS[currentTab].name} Marketplace`)
+    }
   })
 
   const handleChangeTab = useCallback(
     (idx: number) => {
+      trackPageView(`${TABS[idx].name} Marketplace`)
       setSearchParams({ tab: TABS[idx].name })
     },
-    [setSearchParams]
+    [setSearchParams, trackPageView]
   )
 
   return (

diff --git a/packages/atlas/src/views/viewer/ViewerLayout.tsx b/packages/atlas/src/views/viewer/ViewerLayout.tsx
@@ -221,7 +221,7 @@ const MiscUtils = () => {
           : Object.entries(locationToPageName).find(([key]) => location.pathname.includes(key))?.[1]
 
       //pages below will be tracked by the view components in order to include the additional params
-      if (['Channel', 'Category', 'Video'].some((page) => pageName?.includes(page))) {
+      if (['Channel', 'Category', 'Video', 'Marketplace'].some((page) => pageName?.includes(page))) {
         return
       }
       const [query, referrerChannel, utmSource, utmCampaign, utmContent, gState, gCode] = [