fix: Add multiple analytics tracks (#2968)

* fix: Track worlds for ens announcement moal actions * fix: Update tracked events * fix: Update tracked events * fix: Track your storage modal actinos * fix: Track claim ens domain on deploy modal * fix: Track claim in worlds list page
decentraland · Oct 10, 2023 · 2f9b72f · 2f9b72f · vercel · Oct 10, 2023
1 parent e781424
commit 2f9b72f
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 7 deletions.
diff --git a/src/components/Modals/DeployModal/DeployToWorld_WorldsForEnsOwnersFeature/DeployToWorld.tsx b/src/components/Modals/DeployModal/DeployToWorld_WorldsForEnsOwnersFeature/DeployToWorld.tsx
@@ -109,6 +109,7 @@ export default function DeployToWorld({
       analytics.track('Publish to World - Claim Name')
       onReplace(ensUrl, { fromParam: FromParam.DEPLOY_TO_WORLD, projectId: project.id })
     } else {
+      analytics.track('Publish to World - Claim ENS Domain')
       window.open(ENS_DOMAINS_URL, '_blank', 'noopener,noreferrer')
     }
   }, [nameType, project, onReplace, analytics])

diff --git a/...onents/Modals/WorldsForENSOwnersAnnouncementModal/WorldsForENSOwnersAnnouncementModal.tsx b/...onents/Modals/WorldsForENSOwnersAnnouncementModal/WorldsForENSOwnersAnnouncementModal.tsx
@@ -2,19 +2,30 @@ import React, { useCallback } from 'react'
 import { Button, ModalActions, ModalContent, ModalNavigation } from 'decentraland-ui'
 import Modal from 'decentraland-dapps/dist/containers/Modal'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { track } from 'modules/analytics/sagas'
 import { Props } from './WorldsForENSOwnersAnnouncementModal.types'
 import { persistCanOpenWorldsForENSOwnersAnnouncementModal } from './utils'
 import ensImg from './images/ens.svg'
 import styles from './WorldsForENSOwnersAnnouncementModal.module.css'
 
-export const DOCUMENTATION_URL = 'https://docs.decentraland.org/creator/worlds/about/'
+const MODAL_ACTION_EVENT = 'Worlds For ENS Owners Announcement Modal Action'
+const DOCUMENTATION_URL = 'https://docs.decentraland.org/creator/worlds/about/'
 
 const WorldsForENSOwnersAnnouncementModal: React.FC<Props> = ({ name, onClose }) => {
   const handleOnClose = useCallback(() => {
     persistCanOpenWorldsForENSOwnersAnnouncementModal(false)
     onClose()
   }, [onClose])
 
+  const handleOnStartBuilding = useCallback(() => {
+    track(MODAL_ACTION_EVENT, { action: 'Click Start Building' })
+    handleOnClose()
+  }, [handleOnClose])
+
+  const handleOnLearnMore = useCallback(() => {
+    track(MODAL_ACTION_EVENT, { action: 'Click Learn Modal' })
+  }, [])
+
   return (
     <Modal name={name} onClose={handleOnClose}>
       <ModalNavigation
@@ -35,10 +46,10 @@ const WorldsForENSOwnersAnnouncementModal: React.FC<Props> = ({ name, onClose })
         </div>
       </ModalContent>
       <ModalActions className={styles.actions}>
-        <Button primary onClick={handleOnClose}>
+        <Button primary onClick={handleOnStartBuilding}>
           {t('worlds_for_ens_owners_announcement_modal.start_building')}
         </Button>
-        <Button as="a" href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
+        <Button as="a" href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer" onClick={handleOnLearnMore}>
           {t('worlds_for_ens_owners_announcement_modal.learn_more')}
         </Button>
       </ModalActions>

diff --git a/src/components/Modals/WorldsYourStorageModal/WorldsYourStorageModal.tsx b/src/components/Modals/WorldsYourStorageModal/WorldsYourStorageModal.tsx
@@ -3,6 +3,7 @@ import { Button, ModalContent, ModalNavigation } from 'decentraland-ui'
 import Modal from 'decentraland-dapps/dist/containers/Modal'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { formatNumber } from 'decentraland-dapps/dist/lib/utils'
+import { track } from 'modules/analytics/sagas'
 import { locations } from 'routing/locations'
 import { fromBytesToMegabytes } from 'components/WorldListPage_WorldsForEnsOwnersFeature/utils'
 import { config } from 'config'
@@ -12,6 +13,7 @@ import { Props, State, WorldsYourStorageModalMetadata } from './WorldsYourStorag
 import { fetchAccountHoldings, getMbsFromAccountHoldings } from './utils'
 import styles from './WorldsYourStorageModal.module.css'
 
+const MODAL_ACTION_EVENT = 'Worlds Your Storage Modal Action'
 const MARKETPLACE_WEB_URL = config.get('MARKETPLACE_WEB_URL')
 const ACCOUNT_URL = config.get('ACCOUNT_URL')
 
@@ -68,7 +70,16 @@ export default class WorldsYourStorageModal extends React.PureComponent<Props, S
               ) : null}
             </div>
             <div>
-              <Button as="a" href={ACCOUNT_URL} primary target="_blank" rel="noopener noreferrer">
+              <Button
+                as="a"
+                href={ACCOUNT_URL}
+                primary
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => {
+                  track(MODAL_ACTION_EVENT, { action: 'Click Buy MANA' })
+                }}
+              >
                 {t('worlds_your_storage_modal.mana_buy')}
               </Button>
             </div>
@@ -89,7 +100,16 @@ export default class WorldsYourStorageModal extends React.PureComponent<Props, S
               ) : null}
             </div>
             <div>
-              <Button as="a" href={MARKETPLACE_WEB_URL + '/lands'} primary target="_blank" rel="noopener noreferrer">
+              <Button
+                as="a"
+                href={MARKETPLACE_WEB_URL + '/lands'}
+                primary
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => {
+                  track(MODAL_ACTION_EVENT, { action: 'Click Buy LAND' })
+                }}
+              >
                 {t('worlds_your_storage_modal.lands_buy')}
               </Button>
             </div>
@@ -110,14 +130,28 @@ export default class WorldsYourStorageModal extends React.PureComponent<Props, S
               ) : null}
             </div>
             <div>
-              <Button as="a" href={locations.claimENS()} primary target="_blank" rel="noopener noreferrer">
+              <Button
+                as="a"
+                href={locations.claimENS()}
+                primary
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => {
+                  track(MODAL_ACTION_EVENT, { action: 'Click Buy NAME' })
+                }}
+              >
                 {t('worlds_your_storage_modal.names_buy')}
               </Button>
             </div>
           </div>
           <div className={styles.proposal}>
             <InfoIcon className={styles.icon} /> <span>{t('worlds_your_storage_modal.proposal')}</span>{' '}
-            <a href="https://governance.decentraland.org/proposal/?id=c3216070-e822-11ed-b8f1-75dbe089d333">
+            <a
+              href="https://governance.decentraland.org/proposal/?id=c3216070-e822-11ed-b8f1-75dbe089d333"
+              onClick={() => {
+                track('Worlds Your Storage Modal Action', { action: 'Click Learn More' })
+              }}
+            >
               {t('worlds_your_storage_modal.learn_more')}
             </a>
           </div>

diff --git a/src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldListPage.tsx b/src/components/WorldListPage_WorldsForEnsOwnersFeature/WorldListPage.tsx
@@ -21,6 +21,7 @@ import { isDevelopment } from 'lib/environment'
 import { WorldsWalletStats } from 'lib/api/worlds'
 import { ENS } from 'modules/ens/types'
 import { isExternalName } from 'modules/ens/utils'
+import { track } from 'modules/analytics/sagas'
 import { locations } from 'routing/locations'
 import CopyToClipboard from 'components/CopyToClipboard/CopyToClipboard'
 import Icon from 'components/Icon'
@@ -34,6 +35,7 @@ import { TabType, useCurrentlySelectedTab } from './hooks'
 import { DCLWorldsStatus, fromBytesToMegabytes, getDCLWorldsStatus } from './utils'
 import './WorldListPage.css'
 
+const PAGE_ACTION_EVENT = 'Worlds List Page Action'
 const EXPLORER_URL = config.get('EXPLORER_URL', '')
 const WORLDS_CONTENT_SERVER_URL = config.get('WORLDS_CONTENT_SERVER', '')
 const ENS_DOMAINS_URL = config.get('ENS_DOMAINS_URL', '')
@@ -75,8 +77,10 @@ const WorldListPage: React.FC<Props> = props => {
 
   const handleClaimENS = useCallback(() => {
     if (tab === TabType.DCL) {
+      track(PAGE_ACTION_EVENT, { action: 'Click Claim NAME' })
       onNavigate(locations.claimENS())
     } else {
+      track(PAGE_ACTION_EVENT, { action: 'Click Claim ENS Domain' })
       window.open(ENS_DOMAINS_URL, '_blank', 'noopener,noreferrer')
     }
   }, [onNavigate, tab])