From 71dfcc4dd9d5795ce3fc1a8e59cc9639f49e8e31 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Mon, 29 Aug 2022 00:15:21 -0500
Subject: [PATCH] Add tracking for clicking recommended card & tournament card

---
 web/components/contract/contract-card.tsx  | 15 ++++++++++-----
 web/components/contract/contracts-grid.tsx |  3 +++
 web/pages/[username]/[contractSlug].tsx    |  5 ++++-
 web/pages/tournaments/index.tsx            |  1 +
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index e5ea724b..ef23b4be 100644
--- a/web/components/contract/contract-card.tsx
+++ b/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', {
-              slug: contract.slug,
-              contractId: contract.id,
-            })}
+            onClick={trackCallback(
+              'click market card' + (trackingPostfix ?? ''),
+              {
+                slug: contract.slug,
+                contractId: contract.id,
+              }
+            )}
             className="absolute top-0 left-0 right-0 bottom-0"
           />
         </Link>
diff --git a/web/components/contract/contracts-grid.tsx b/web/components/contract/contracts-grid.tsx
index 603173f6..2f804644 100644
--- a/web/components/contract/contracts-grid.tsx
+++ b/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
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 2ef472fc..f9f45144 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/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>
diff --git a/web/pages/tournaments/index.tsx b/web/pages/tournaments/index.tsx
index 65f5597f..c089226d 100644
--- a/web/pages/tournaments/index.tsx
+++ b/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"
             />
           ))
         ) : (