Add tracking for clicking recommended card & tournament card

web/components/contract/contract-card.tsx

@@ -43,6 +43,7 @@ export function ContractCard(props: {
   onClick?: () => void
   hideQuickBet?: boolean
   hideGroupLink?: boolean
+  trackingPostfix?: string
 }) {
   const {
     showHotVolume,
@@ -52,6 +53,7 @@ export function ContractCard(props: {
     onClick,
     hideQuickBet,
     hideGroupLink,
+    trackingPostfix,
   } = props
   const contract = useContractWithPreload(props.contract) ?? props.contract
   const { question, outcomeType } = contract
@@ -166,7 +168,7 @@ export function ContractCard(props: {
             if (e.ctrlKey || e.metaKey) return
 
             e.preventDefault()
-            track('click market card', {
+            track('click market card' + (trackingPostfix ?? ''), {
               slug: contract.slug,
               contractId: contract.id,
             })
@@ -176,10 +178,13 @@ export function ContractCard(props: {
       ) : (
         <Link href={contractPath(contract)}>
           <a
-            onClick={trackCallback('click market card', {
+            onClick={trackCallback(
+              'click market card' + (trackingPostfix ?? ''),
+              {
                 slug: contract.slug,
                 contractId: contract.id,
-            })}
+              }
+            )}
             className="absolute top-0 left-0 right-0 bottom-0"
           />
         </Link>

web/components/contract/contracts-grid.tsx

@@ -26,6 +26,7 @@ export function ContractsGrid(props: {
     hideGroupLink?: boolean
   }
   highlightOptions?: ContractHighlightOptions
+  trackingPostfix?: string
 }) {
   const {
     contracts,
@@ -34,6 +35,7 @@ export function ContractsGrid(props: {
     onContractClick,
     cardHideOptions,
     highlightOptions,
+    trackingPostfix,
   } = props
   const { hideQuickBet, hideGroupLink } = cardHideOptions || {}
   const { contractIds, highlightClassName } = highlightOptions || {}
@@ -79,6 +81,7 @@ export function ContractsGrid(props: {
             }
             hideQuickBet={hideQuickBet}
             hideGroupLink={hideGroupLink}
+            trackingPostfix={trackingPostfix}
             className={clsx(
               'mb-4 break-inside-avoid-column overflow-hidden', // prevent content from wrapping (needs overflow on firefox)
               contractIds?.includes(contract.id) && highlightClassName

web/pages/[username]/[contractSlug].tsx

@@ -285,7 +285,10 @@ export function ContractPageContent(
       {recommendedContracts.length > 0 && (
         <Col className="mt-2 gap-2 px-2 sm:px-0">
           <Title className="text-gray-700" text="Recommended" />
-          <ContractsGrid contracts={recommendedContracts} />
+          <ContractsGrid
+            contracts={recommendedContracts}
+            trackingPostfix=" recommended"
+          />
         </Col>
       )}
     </Page>

web/pages/tournaments/index.tsx

@@ -215,6 +215,7 @@ function Section(props: {
               hideGroupLink
               className="max-h-[200px] w-96 shrink-0"
               questionClass="line-clamp-3"
+              trackingPostfix=" tournament"
             />
           ))
         ) : (