From 129b76345c5903cad47e636cc8ffbd894836075c Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 29 Jan 2025 18:42:39 -0500
Subject: [PATCH 1/7] fire a posthog event when clicking the "Topic" link on
 the homepage in "Browse by Topic"

---
 .../src/page-components/HeroSearch/HeroSearch.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
index f3c7fdd822..72e9e14656 100644
--- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
+++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
@@ -29,6 +29,7 @@ import {
 } from "@remixicon/react"
 import Image from "next/image"
 import { SearchField } from "@/page-components/SearchField/SearchField"
+import { usePostHog } from "posthog-js/react"
 
 type SearchChip = {
   label: string
@@ -193,6 +194,12 @@ const BoldLink = styled(Link)(({ theme }) => ({
 }))
 
 const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
+  const posthog = usePostHog()
+  const posthogCapture = (event: string) => {
+    if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+      posthog.capture(event)
+    }
+  }
   const [searchText, setSearchText] = useState("")
   const onSearchClear = useCallback(() => setSearchText(""), [])
   const router = useRouter()
@@ -240,7 +247,13 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
             <BrowseByTopicContainer>
               <BrowseByTopicText>
                 or browse by{" "}
-                <TopicLink href="/topics/" color="red">
+                <TopicLink
+                  href="/topics/"
+                  onClick={() => {
+                    posthogCapture("clicked_hero_browse_topics")
+                  }}
+                  color="red"
+                >
                   Topic
                 </TopicLink>
               </BrowseByTopicText>

From 0fc015c3a4cb970a823278073ae8314d1cc90659 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 5 Feb 2025 12:24:50 -0500
Subject: [PATCH 2/7] add events for homepage browse topics section

---
 .../src/app-pages/HomePage/BrowseTopicsSection.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
index ed4af8a188..e922a5676d 100644
--- a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
+++ b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
@@ -11,6 +11,7 @@ import { ButtonLink } from "@mitodl/smoot-design"
 import { useLearningResourceTopics } from "api/hooks/learningResources"
 import { RiArrowRightLine } from "@remixicon/react"
 import RootTopicIcon from "@/components/RootTopicIcon/RootTopicIcon"
+import { usePostHog } from "posthog-js/react"
 
 const Section = styled.section`
   background: #fff url("/images/backgrounds/open-bg-texture-with-gradient.svg")
@@ -104,6 +105,7 @@ const SeeAllButton = styled(ButtonLink)`
 `
 
 const BrowseTopicsSection: React.FC = () => {
+  const posthog = usePostHog()
   const { data: topics } = useLearningResourceTopics({ is_toplevel: true })
 
   return (
@@ -119,6 +121,9 @@ const BrowseTopicsSection: React.FC = () => {
                 <TopicBox
                   key={id}
                   href={channelUrl ? new URL(channelUrl!).pathname : ""}
+                  onClick={() => {
+                    posthog.capture("home_topic_clicked", { topic: name })
+                  }}
                 >
                   <TopicBoxContent>
                     <RootTopicIcon icon={icon} />
@@ -130,7 +135,14 @@ const BrowseTopicsSection: React.FC = () => {
             },
           )}
         </Topics>
-        <SeeAllButton href="/topics/" size="large" responsive>
+        <SeeAllButton
+          href="/topics/"
+          onClick={() => {
+            posthog.capture("home_see_all_topics_clicked")
+          }}
+          size="large"
+          responsive
+        >
           See all
         </SeeAllButton>
       </Container>

From ca5c317ccbf3cd7a9c929b1d61033b7f1d56785c Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 5 Feb 2025 12:56:05 -0500
Subject: [PATCH 3/7] wrap new events in posthog api key check

---
 .../main/src/app-pages/HomePage/BrowseTopicsSection.tsx   | 8 ++++++--
 .../main/src/page-components/HeroSearch/HeroSearch.tsx    | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
index e922a5676d..6ec844289d 100644
--- a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
+++ b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
@@ -122,7 +122,9 @@ const BrowseTopicsSection: React.FC = () => {
                   key={id}
                   href={channelUrl ? new URL(channelUrl!).pathname : ""}
                   onClick={() => {
-                    posthog.capture("home_topic_clicked", { topic: name })
+                    if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+                      posthog.capture("home_topic_clicked", { topic: name })
+                    }
                   }}
                 >
                   <TopicBoxContent>
@@ -138,7 +140,9 @@ const BrowseTopicsSection: React.FC = () => {
         <SeeAllButton
           href="/topics/"
           onClick={() => {
-            posthog.capture("home_see_all_topics_clicked")
+            if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+              posthog.capture("home_see_all_topics_clicked")
+            }
           }}
           size="large"
           responsive
diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
index 72e9e14656..e1b6a293b0 100644
--- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
+++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
@@ -250,7 +250,9 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
                 <TopicLink
                   href="/topics/"
                   onClick={() => {
-                    posthogCapture("clicked_hero_browse_topics")
+                    if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+                      posthogCapture("clicked_hero_browse_topics")
+                    }
                   }}
                   color="red"
                 >

From 501cef0a008d947ab09d9de0ad11444b8f6df26b Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 5 Feb 2025 13:07:57 -0500
Subject: [PATCH 4/7] track topic_clicked vs subtopic_clicked on topics listing
 page

---
 .../TopicsListingPage/TopicsListingPage.tsx   | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
index b52b3dd090..4b3d93745f 100644
--- a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
+++ b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
@@ -23,6 +23,17 @@ import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 import { useChannelCounts } from "api/hooks/channels"
 import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { usePostHog } from "posthog-js/react"
+import type { PostHog } from "posthog-js"
+
+const captureTopicClicked = (
+  posthog: PostHog,
+  event: string,
+  topic: string,
+) => {
+  if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+    posthog.capture(event, { topic })
+  }
+}
 
 type ChannelSummary = {
   id: number | string
@@ -37,12 +48,20 @@ type TopicBoxHeaderProps = {
   icon?: string
   href?: string
   className?: string
+  posthog?: PostHog
 }
 const TopicBoxHeader = styled(
-  ({ title, icon, href, className }: TopicBoxHeaderProps) => {
+  ({ title, icon, href, className, posthog }: TopicBoxHeaderProps) => {
     return (
       <Typography variant="h5" component="h2" className={className}>
-        <Link href={href ?? ""}>
+        <Link
+          href={href ?? ""}
+          onClick={() => {
+            if (posthog) {
+              captureTopicClicked(posthog, "topic_clicked", title)
+            }
+          }}
+        >
           <RootTopicIcon icon={icon} aria-hidden="true" />
           <span>
             <span className="topic-title">{title}</span>
@@ -131,15 +150,10 @@ const TopicBox = ({
     { label: "Programs", count: programCount },
   ].filter((item) => item.count)
   const { title, href, icon, channels } = topicGroup
-  const captureTopicClicked = (topic: string) => {
-    if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-      posthog.capture("topic_clicked", { topic })
-    }
-  }
 
   return (
     <li className={className}>
-      <TopicBoxHeader title={title} href={href} icon={icon} />
+      <TopicBoxHeader title={title} href={href} icon={icon} posthog={posthog} />
       <TopicBoxBody>
         <TopicCounts>
           {counts.map((item) => (
@@ -156,7 +170,7 @@ const TopicBox = ({
               key={c.id}
               href={c.channel_url && new URL(c.channel_url).pathname}
               onClick={() => {
-                captureTopicClicked(title)
+                captureTopicClicked(posthog, "subtopic_clicked", title)
               }}
               label={c.name}
             />
@@ -170,7 +184,7 @@ const TopicBox = ({
               key={c.id}
               href={c.channel_url && new URL(c.channel_url).pathname}
               onClick={() => {
-                captureTopicClicked(title)
+                captureTopicClicked(posthog, "subtopic_clicked", title)
               }}
               label={c.name}
             />

From bb631241f44fedc835640de8a66660ce4a15427b Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 5 Feb 2025 13:15:22 -0500
Subject: [PATCH 5/7] properly set subtopic name

---
 .../src/app-pages/TopicsListingPage/TopicsListingPage.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
index 4b3d93745f..b242a11b31 100644
--- a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
+++ b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
@@ -170,7 +170,7 @@ const TopicBox = ({
               key={c.id}
               href={c.channel_url && new URL(c.channel_url).pathname}
               onClick={() => {
-                captureTopicClicked(posthog, "subtopic_clicked", title)
+                captureTopicClicked(posthog, "subtopic_clicked", c.name)
               }}
               label={c.name}
             />
@@ -184,7 +184,7 @@ const TopicBox = ({
               key={c.id}
               href={c.channel_url && new URL(c.channel_url).pathname}
               onClick={() => {
-                captureTopicClicked(posthog, "subtopic_clicked", title)
+                captureTopicClicked(posthog, "subtopic_clicked", c.name)
               }}
               label={c.name}
             />

From 37e4631fa8d0ff46e422f6da00f6713715a23e6d Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 5 Feb 2025 13:34:56 -0500
Subject: [PATCH 6/7] properly track clicking a subtopic vs related topic on
 the topic channel page

---
 .../ChannelPage/TopicChannelTemplate.tsx      | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx b/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx
index 297a1f9f70..5dc2bce077 100644
--- a/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx
+++ b/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx
@@ -79,14 +79,18 @@ const BannerSkeleton = styled(Skeleton)(({ theme }) => ({
 }))
 
 type TopicChipsInternalProps = {
-  title: string
   topicId: number
   parentTopicId: number
+  isTopLevelTopic: boolean
 }
 
 const TopicChipsInternal: React.FC<TopicChipsInternalProps> = (props) => {
   const posthog = usePostHog()
-  const { title, topicId, parentTopicId } = props
+  const { topicId, parentTopicId, isTopLevelTopic } = props
+  const title = isTopLevelTopic ? "Subtopics" : "Related Topics"
+  const posthogEvent = isTopLevelTopic
+    ? "subtopic_clicked"
+    : "related_topic_clicked"
   const subTopicsQuery = useLearningResourceTopics({
     parent_topic_id: [parentTopicId],
   })
@@ -106,7 +110,7 @@ const TopicChipsInternal: React.FC<TopicChipsInternalProps> = (props) => {
             href={topic.channel_url ?? ""}
             onClick={() => {
               if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-                posthog.capture("related_topic_link_clicked", { topic })
+                posthog.capture(posthogEvent, { topic })
               }
             }}
             label={topic.name}
@@ -127,24 +131,17 @@ const TopicChips: React.FC<TopicChipsProps> = (props) => {
     return null
   }
   const isTopLevelTopic = topic?.parent === null
+  const parentTopicId = isTopLevelTopic ? topic.id : topic?.parent
 
-  if (isTopLevelTopic) {
+  if (parentTopicId) {
     return (
       <TopicChipsInternal
-        title="Subtopics"
         topicId={topic.id}
-        parentTopicId={topic.id}
+        parentTopicId={parentTopicId}
+        isTopLevelTopic={isTopLevelTopic}
       />
     )
-  } else if (topic?.parent) {
-    return (
-      <TopicChipsInternal
-        title="Related Topics"
-        topicId={topic.id}
-        parentTopicId={topic?.parent}
-      />
-    )
-  } else return null
+  }
 }
 
 type SubTopicBreadcrumbsProps = {

From 059ae1ed503b775121b47cca0fd8f3c68aec5dea Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 5 Feb 2025 15:04:24 -0500
Subject: [PATCH 7/7] consolidate posthog events to a constants file

---
 .../ChannelPage/TopicChannelTemplate.tsx      |  5 ++--
 .../DepartmentListingPage.tsx                 |  5 +++-
 .../HomePage/BrowseTopicsSection.tsx          |  7 +++--
 .../TopicsListingPage/TopicsListingPage.tsx   | 15 ++++++++--
 .../app-pages/UnitsListingPage/UnitCard.tsx   |  5 +++-
 frontends/main/src/common/constants.ts        | 28 +++++++++++++++++++
 .../Dialogs/AddToListDialog.tsx               |  3 +-
 .../src/page-components/Header/Header.tsx     | 27 +++++++++---------
 .../page-components/HeroSearch/HeroSearch.tsx |  3 +-
 .../LearningResourceDrawer.tsx                |  7 +++--
 .../LearningResourceExpanded.tsx              |  3 +-
 .../SearchField/SearchField.tsx               |  3 +-
 12 files changed, 83 insertions(+), 28 deletions(-)
 create mode 100644 frontends/main/src/common/constants.ts

diff --git a/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx b/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx
index 5dc2bce077..e30ecd4727 100644
--- a/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx
+++ b/frontends/main/src/app-pages/ChannelPage/TopicChannelTemplate.tsx
@@ -27,6 +27,7 @@ import { propsNotNil, backgroundSrcSetCSS } from "ol-utilities"
 import invariant from "tiny-invariant"
 import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 const ChildrenContainer = styled.div(({ theme }) => ({
   paddingTop: "40px",
@@ -89,8 +90,8 @@ const TopicChipsInternal: React.FC<TopicChipsInternalProps> = (props) => {
   const { topicId, parentTopicId, isTopLevelTopic } = props
   const title = isTopLevelTopic ? "Subtopics" : "Related Topics"
   const posthogEvent = isTopLevelTopic
-    ? "subtopic_clicked"
-    : "related_topic_clicked"
+    ? PostHogEvents.SubTopicClicked
+    : PostHogEvents.RelatedTopicClicked
   const subTopicsQuery = useLearningResourceTopics({
     parent_topic_id: [parentTopicId],
   })
diff --git a/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx b/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx
index 75676157c5..5b69ee7078 100644
--- a/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx
+++ b/frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx
@@ -31,6 +31,7 @@ import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { aggregateProgramCounts, aggregateCourseCounts } from "@/common/utils"
 import { useChannelCounts } from "api/hooks/channels"
 import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 const SCHOOL_ICONS: Record<string, React.ReactNode> = {
   // School of Architecture and Planning
@@ -155,7 +156,9 @@ const SchoolDepartments: React.FC<SchoolDepartmentProps> = ({
                   new URL(department.channel_url).pathname
                 }
                 onClick={() => {
-                  posthog.capture("department_link_clicked", { department })
+                  posthog.capture(PostHogEvents.DepartmentLinkClicked, {
+                    department,
+                  })
                 }}
               >
                 <ListItemText
diff --git a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
index 6ec844289d..88ef1a5fb5 100644
--- a/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
+++ b/frontends/main/src/app-pages/HomePage/BrowseTopicsSection.tsx
@@ -12,6 +12,7 @@ import { useLearningResourceTopics } from "api/hooks/learningResources"
 import { RiArrowRightLine } from "@remixicon/react"
 import RootTopicIcon from "@/components/RootTopicIcon/RootTopicIcon"
 import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 const Section = styled.section`
   background: #fff url("/images/backgrounds/open-bg-texture-with-gradient.svg")
@@ -123,7 +124,9 @@ const BrowseTopicsSection: React.FC = () => {
                   href={channelUrl ? new URL(channelUrl!).pathname : ""}
                   onClick={() => {
                     if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-                      posthog.capture("home_topic_clicked", { topic: name })
+                      posthog.capture(PostHogEvents.HomeTopicClicked, {
+                        topic: name,
+                      })
                     }
                   }}
                 >
@@ -141,7 +144,7 @@ const BrowseTopicsSection: React.FC = () => {
           href="/topics/"
           onClick={() => {
             if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-              posthog.capture("home_see_all_topics_clicked")
+              posthog.capture(PostHogEvents.HomeSeeAllTopicsClicked)
             }
           }}
           size="large"
diff --git a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
index b242a11b31..d72f6ed636 100644
--- a/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
+++ b/frontends/main/src/app-pages/TopicsListingPage/TopicsListingPage.tsx
@@ -24,6 +24,7 @@ import { useChannelCounts } from "api/hooks/channels"
 import backgroundSteps from "@/public/images/backgrounds/background_steps.jpg"
 import { usePostHog } from "posthog-js/react"
 import type { PostHog } from "posthog-js"
+import { PostHogEvents } from "@/common/constants"
 
 const captureTopicClicked = (
   posthog: PostHog,
@@ -58,7 +59,7 @@ const TopicBoxHeader = styled(
           href={href ?? ""}
           onClick={() => {
             if (posthog) {
-              captureTopicClicked(posthog, "topic_clicked", title)
+              captureTopicClicked(posthog, PostHogEvents.TopicClicked, title)
             }
           }}
         >
@@ -170,7 +171,11 @@ const TopicBox = ({
               key={c.id}
               href={c.channel_url && new URL(c.channel_url).pathname}
               onClick={() => {
-                captureTopicClicked(posthog, "subtopic_clicked", c.name)
+                captureTopicClicked(
+                  posthog,
+                  PostHogEvents.SubTopicClicked,
+                  c.name,
+                )
               }}
               label={c.name}
             />
@@ -184,7 +189,11 @@ const TopicBox = ({
               key={c.id}
               href={c.channel_url && new URL(c.channel_url).pathname}
               onClick={() => {
-                captureTopicClicked(posthog, "subtopic_clicked", c.name)
+                captureTopicClicked(
+                  posthog,
+                  PostHogEvents.SubTopicClicked,
+                  c.name,
+                )
               }}
               label={c.name}
             />
diff --git a/frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx b/frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx
index ca4d91bf05..bdef05e715 100644
--- a/frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx
+++ b/frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx
@@ -11,6 +11,7 @@ import {
 } from "ol-components"
 import Link from "next/link"
 import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 const CardStyled = styled(Card)({
   height: "100%",
@@ -132,7 +133,9 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
                 href={href}
                 onClick={() => {
                   if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-                    posthog.capture("provider_link_clicked", { provider: unit })
+                    posthog.capture(PostHogEvents.ProviderLinkClicked, {
+                      provider: unit,
+                    })
                   }
                 }}
                 data-card-link
diff --git a/frontends/main/src/common/constants.ts b/frontends/main/src/common/constants.ts
new file mode 100644
index 0000000000..60ca468168
--- /dev/null
+++ b/frontends/main/src/common/constants.ts
@@ -0,0 +1,28 @@
+export const PostHogEvents = {
+  SearchUpdate: "search_update",
+  CallToActionClicked: "cta_clicked",
+  LearningResourceDrawerOpen: "lrd_open",
+  LearningResourceDrawerView: "lrd_view",
+  HeroBrowseTopics: "clicked_hero_browse_topics",
+  LRAddToList: "lr_add_to_list",
+  ProviderLinkClicked: "provider_link_clicked",
+  HomeTopicClicked: "home_topic_clicked",
+  HomeSeeAllTopicsClicked: "home_see_all_topics_clicked",
+  TopicClicked: "topic_clicked",
+  SubTopicClicked: "sub_topic_clicked",
+  RelatedTopicClicked: "related_topic_clicked",
+  DepartmentLinkClicked: "department_link_clicked",
+  ClosedNavDrawer: "closed_nav_drawer",
+  OpenedNavDrawer: "opened_nav_drawer",
+  ClickedNavBrowseCourses: "clicked_nav_browse_courses",
+  ClickedNavBrowsePrograms: "clicked_nav_browse_programs",
+  ClickedNavBrowseLearningMaterials: "clicked_nav_browse_learning_materials",
+  ClickedNavBrowseTopics: "clicked_nav_browse_topics",
+  ClickedNavBrowseDepartments: "clicked_nav_browse_departments",
+  ClickedNavBrowseProviders: "clicked_nav_browse_providers",
+  ClickedNavBrowseNew: "clicked_nav_browse_new",
+  ClickedNavBrowseUpcoming: "clicked_nav_browse_upcoming",
+  ClickedNavBrowsePopular: "clicked_nav_browse_popular",
+  ClickedNavBrowseFree: "clicked_nav_browse_free",
+  ClickedNavBrowseCertificate: "clicked_nav_browse_certificate",
+} as const
diff --git a/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx b/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx
index f372d7b5de..7b1cdc9b6a 100644
--- a/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx
+++ b/frontends/main/src/page-components/Dialogs/AddToListDialog.tsx
@@ -29,6 +29,7 @@ import {
 import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageListDialogs"
 import { ListType } from "api/constants"
 import { useFormik } from "formik"
+import { PostHogEvents } from "@/common/constants"
 
 const LIST_LIMIT = 100
 
@@ -101,7 +102,7 @@ const AddToListDialogInner: React.FC<AddToListDialogInnerProps> = ({
     onSubmit: async (values) => {
       if (resource) {
         if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-          posthog.capture("lr_add_to_list", {
+          posthog.capture(PostHogEvents.LRAddToList, {
             listType: listType,
             resourceId: resource?.id,
             readableId: resource?.readable_id,
diff --git a/frontends/main/src/page-components/Header/Header.tsx b/frontends/main/src/page-components/Header/Header.tsx
index b1f975f3f5..86e28ce3e8 100644
--- a/frontends/main/src/page-components/Header/Header.tsx
+++ b/frontends/main/src/page-components/Header/Header.tsx
@@ -38,6 +38,7 @@ import {
 } from "@/common/urls"
 import { useUserMe } from "api/hooks/user"
 import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 const Bar = styled(AppBar)(({ theme }) => ({
   padding: "16px 8px",
@@ -188,7 +189,7 @@ const navData: NavData = {
           description:
             "Single courses on a specific subject, taught by MIT instructors",
           href: SEARCH_COURSE,
-          posthogEvent: "clicked_nav_browse_courses",
+          posthogEvent: PostHogEvents.ClickedNavBrowseCourses,
         },
         {
           title: "Programs",
@@ -196,7 +197,7 @@ const navData: NavData = {
           description:
             "A series of courses for in-depth learning across a range of topics",
           href: SEARCH_PROGRAM,
-          posthogEvent: "clicked_nav_browse_programs",
+          posthogEvent: PostHogEvents.ClickedNavBrowsePrograms,
         },
         {
           title: "Learning Materials",
@@ -204,7 +205,7 @@ const navData: NavData = {
           description:
             "Free learning and teaching materials, including videos, podcasts, lecture notes, and more",
           href: SEARCH_LEARNING_MATERIAL,
-          posthogEvent: "clicked_nav_browse_learning_materials",
+          posthogEvent: PostHogEvents.ClickedNavBrowseLearningMaterials,
         },
       ],
     },
@@ -215,19 +216,19 @@ const navData: NavData = {
           title: "By Topic",
           icon: <RiPresentationLine />,
           href: TOPICS,
-          posthogEvent: "clicked_nav_browse_topics",
+          posthogEvent: PostHogEvents.ClickedNavBrowseTopics,
         },
         {
           title: "By Department",
           icon: <RiNodeTree />,
           href: DEPARTMENTS,
-          posthogEvent: "clicked_nav_browse_departments",
+          posthogEvent: PostHogEvents.ClickedNavBrowseDepartments,
         },
         {
           title: "By Provider",
           icon: <RiVerifiedBadgeLine />,
           href: UNITS,
-          posthogEvent: "clicked_nav_browse_providers",
+          posthogEvent: PostHogEvents.ClickedNavBrowseProviders,
         },
       ],
     },
@@ -238,31 +239,31 @@ const navData: NavData = {
           title: "Recently Added",
           icon: <RiFileAddLine />,
           href: SEARCH_NEW,
-          posthogEvent: "clicked_nav_browse_new",
+          posthogEvent: PostHogEvents.ClickedNavBrowseNew,
         },
         {
           title: "Upcoming",
           icon: <RiTimeLine />,
           href: SEARCH_UPCOMING,
-          posthogEvent: "clicked_nav_browse_upcoming",
+          posthogEvent: PostHogEvents.ClickedNavBrowseUpcoming,
         },
         {
           title: "Popular",
           href: SEARCH_POPULAR,
           icon: <RiHeartLine />,
-          posthogEvent: "clicked_nav_browse_popular",
+          posthogEvent: PostHogEvents.ClickedNavBrowsePopular,
         },
         {
           title: "Free",
           icon: <RiPriceTag3Line />,
           href: SEARCH_FREE,
-          posthogEvent: "clicked_nav_browse_free",
+          posthogEvent: PostHogEvents.ClickedNavBrowseFree,
         },
         {
           title: "With Certificate",
           icon: <RiAwardLine />,
           href: SEARCH_CERTIFICATE,
-          posthogEvent: "clicked_nav_browse_certificate",
+          posthogEvent: PostHogEvents.ClickedNavBrowseCertificate,
         },
       ],
     },
@@ -275,8 +276,8 @@ const Header: FunctionComponent = () => {
   const desktopTrigger = React.useRef<HTMLButtonElement>(null)
   const mobileTrigger = React.useRef<HTMLButtonElement>(null)
   const drawerToggleEvent = drawerOpen
-    ? "closed_nav_drawer"
-    : "opened_nav_drawer"
+    ? PostHogEvents.ClosedNavDrawer
+    : PostHogEvents.OpenedNavDrawer
   const posthogCapture = (event: string) => {
     if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
       posthog.capture(event)
diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
index e1b6a293b0..029dd00e0d 100644
--- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
+++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
@@ -30,6 +30,7 @@ import {
 import Image from "next/image"
 import { SearchField } from "@/page-components/SearchField/SearchField"
 import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 type SearchChip = {
   label: string
@@ -251,7 +252,7 @@ const HeroSearch: React.FC<{ imageIndex: number }> = ({ imageIndex }) => {
                   href="/topics/"
                   onClick={() => {
                     if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-                      posthogCapture("clicked_hero_browse_topics")
+                      posthogCapture(PostHogEvents.HeroBrowseTopics)
                     }
                   }}
                   color="red"
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
index bfbb7d3733..df49e6069f 100644
--- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
@@ -21,6 +21,7 @@ import { useIsLearningPathMember } from "api/hooks/learningPaths"
 import { useIsUserListMember } from "api/hooks/userLists"
 import { TopicCarouselConfig } from "@/common/carousels"
 import { ResourceTypeEnum } from "api"
+import { PostHogEvents } from "@/common/constants"
 
 const RESOURCE_DRAWER_PARAMS = [RESOURCE_DRAWER_QUERY_PARAM] as const
 
@@ -32,7 +33,7 @@ const useCapturePageView = (resourceId: number) => {
   useEffect(() => {
     if (!apiKey || apiKey.length < 1) return
     if (!isSuccess) return
-    posthog.capture("lrd_view", {
+    posthog.capture(PostHogEvents.LearningResourceDrawerView, {
       resourceId: data?.id,
       readableId: data?.readable_id,
       platformCode: data?.platform?.code,
@@ -64,7 +65,9 @@ const DrawerContent: React.FC<{
   const posthog = usePostHog()
   const resource = useLearningResourcesDetail(Number(resourceId))
   if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-    posthog.capture("lrd_open", { resource: resource?.data })
+    posthog.capture(PostHogEvents.LearningResourceDrawerOpen, {
+      resource: resource?.data,
+    })
   }
   const [signupEl, setSignupEl] = React.useState<HTMLElement | null>(null)
   const { data: user } = useUserMe()
diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx
index acd5e44f46..b9ffbcf63c 100644
--- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceExpanded.tsx
@@ -46,6 +46,7 @@ import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
 import classNames from "classnames"
 import AiChatSyllabus from "./AiChatSyllabus"
 import { FeatureFlags } from "@/common/feature_flags"
+import { PostHogEvents } from "@/common/constants"
 
 const DRAWER_WIDTH = "900px"
 const showChatClass = "show-chat"
@@ -610,7 +611,7 @@ const CallToActionSection = ({
           href={resource.url || ""}
           onClick={() => {
             if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-              posthog.capture("cta_clicked", { resource })
+              posthog.capture(PostHogEvents.CallToActionClicked, { resource })
             }
           }}
           data-ph-action="click-cta"
diff --git a/frontends/main/src/page-components/SearchField/SearchField.tsx b/frontends/main/src/page-components/SearchField/SearchField.tsx
index fdb476928a..71d0ad8d9d 100644
--- a/frontends/main/src/page-components/SearchField/SearchField.tsx
+++ b/frontends/main/src/page-components/SearchField/SearchField.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { SearchInput } from "ol-components"
 import type { SearchInputProps, SearchSubmissionEvent } from "ol-components"
 import { usePostHog } from "posthog-js/react"
+import { PostHogEvents } from "@/common/constants"
 
 type SearchFieldProps = SearchInputProps & {
   onSubmit: (event: SearchSubmissionEvent) => void
@@ -26,7 +27,7 @@ const SearchField: React.FC<SearchFieldProps> = ({
     onSubmit(event)
     setPage?.(1)
     if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
-      posthog.capture("search_update", { isEnter: isEnter })
+      posthog.capture(PostHogEvents.SearchUpdate, { isEnter: isEnter })
     }
   }