Analyze tab usage

web/components/contract/contract-tabs.tsx

@@ -87,6 +87,7 @@ export function ContractTabs(props: {
 
   return (
     <Tabs
+      currentPageForAnalytics={'contract'}
       tabs={[
         { title: 'Comments', content: commentActivity },
         { title: 'Bets', content: betActivity },

web/components/layout/tabs.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx'
 import Link from 'next/link'
 import { ReactNode, useState } from 'react'
 import { Row } from './row'
+import { track } from '@amplitude/analytics-browser'
 
 type Tab = {
   title: string
@@ -17,8 +18,16 @@ export function Tabs(props: {
   labelClassName?: string
   onClick?: (tabTitle: string, index: number) => void
   className?: string
+  currentPageForAnalytics?: string
 }) {
-  const { tabs, defaultIndex, labelClassName, onClick, className } = props
+  const {
+    tabs,
+    defaultIndex,
+    labelClassName,
+    onClick,
+    className,
+    currentPageForAnalytics,
+  } = props
   const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
   const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
 
@@ -32,6 +41,11 @@ export function Tabs(props: {
                 id={`tab-${i}`}
                 key={tab.title}
                 onClick={(e) => {
+                  track('Clicked Tab', {
+                    title: tab.title,
+                    href: tab.href,
+                    currentPage: currentPageForAnalytics,
+                  })
                   if (!tab.href) {
                     e.preventDefault()
                   }

web/components/user-page.tsx

@@ -262,6 +262,7 @@ export function UserPage(props: {
 
         {usersContracts !== 'loading' && commentsByContract != 'loading' ? (
           <Tabs
+            currentPageForAnalytics={'profile'}
             labelClassName={'pb-2 pt-1 '}
             defaultIndex={
               defaultTabTitle ? TAB_IDS.indexOf(defaultTabTitle) : 0

web/pages/group/[...slugs]/index.tsx

@@ -248,6 +248,7 @@ export default function GroupPage(props: {
       </Col>
 
       <Tabs
+        currentPageForAnalytics={groupPath(group.slug)}
         className={'mb-0 sm:mb-2'}
         defaultIndex={
           page === 'rankings'

web/pages/groups.tsx

@@ -106,6 +106,7 @@ export default function Groups(props: {
             </div>
 
             <Tabs
+              currentPageForAnalytics={'groups'}
               tabs={[
                 ...(user && memberGroupIds.length > 0
                   ? [

web/pages/leaderboards.tsx

@@ -126,6 +126,7 @@ export default function Leaderboards(props: {
     <Page>
       <Title text={'Leaderboards'} className={'hidden md:block'} />
       <Tabs
+        currentPageForAnalytics={'leaderboards'}
         defaultIndex={0}
         onClick={(title, index) => {
           const period = ['allTime', 'monthly', 'weekly', 'daily'][index]

web/pages/notifications.tsx

@@ -50,6 +50,7 @@ export default function Notifications() {
         <Title text={'Notifications'} className={'hidden md:block'} />
         <div>
           <Tabs
+            currentPageForAnalytics={'notifications'}
             labelClassName={'pb-2 pt-1 '}
             className={'mb-0 sm:mb-2'}
             defaultIndex={0}

web/pages/stats.tsx

@@ -25,6 +25,7 @@ export default function Analytics() {
   return (
     <Page>
       <Tabs
+        currentPageForAnalytics={'stats'}
         tabs={[
           {
             title: 'Activity',