feat(tracker): add the event tracker for clicking collection tab in user profile

src/common/utils/analytics.ts

@@ -103,6 +103,7 @@ export interface ClickButtonProp {
     | 'newest'
     | 'campaign_detail_link'
     | `campaign_detail_tab_${string}`
+    | `user_profile_tab_${string}`
   pageType?: PageType
   pageComponent?: PageComponent
 }

src/components/Tabs/index.tsx

@@ -36,7 +36,12 @@ const Tab: React.FC<React.PropsWithChildren<TabProps>> = ({
 
   if (href) {
     return (
-      <li role="tab" aria-selected={selected} className={classes}>
+      <li
+        role="tab"
+        aria-selected={selected}
+        className={classes}
+        onClick={onClick}
+      >
         <Link href={href || ''} legacyBehavior>
           <a>
             {children}

src/views/User/UserTabs/index.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { toPath } from '~/common/utils'
+import { analytics, toPath } from '~/common/utils'
 import { Tabs, useRoute, ViewerContext } from '~/components'
 import { TabsUserFragment } from '~/gql/graphql'
 
@@ -53,6 +53,12 @@ const UserTabs = ({
           {...userCollectionsPath}
           selected={isInPath('USER_COLLECTIONS')}
           count={collectionCount > 0 ? collectionCount : undefined}
+          onClick={() => {
+            analytics.trackEvent('click_button', {
+              type: `user_profile_tab_collection` as `user_profile_tab_${string}`,
+              pageType: 'user_profile',
+            })
+          }}
         >
           <FormattedMessage defaultMessage="Collections" id="ulh3kf" />
         </Tabs.Tab>