feat: implement PostHog event tracking for user interactions by rachellougee · Pull Request #3218 · mitodl/mit-learn

rachellougee · 2026-04-16T13:13:41Z

What are the relevant tickets?

https://github.com/mitodl/hq/issues/10916

Description (What does it do?)

Adds PostHog analytics event tracking for user interactions:

course_card_clicked — fired when a user clicks a course card in:
- Homepage featured courses
- Drawer - Similar Learning Resources
- Program page course cards
cta_clicked — fired when a user clicks a button in:
- Resource drawer CTA button (e.g. "Access to Course Materials", "Learn More")
- Course enrollment button on course product page
- Program enrollment button on program product page
asktim_clicked — fired when a user opens the AskTIM AI chat on:
- Homepage AskTIM drawer button
- Resource drawer syllabus bot toggle

How can this be tested?

env/frontend.local.env:

NEXT_PUBLIC_MITX_ONLINE_BASE_URL=http://mitxonline.odl.local:8013
NEXT_PUBLIC_MITX_ONLINE_LEGACY_BASE_URL=http://mitxonline.odl.local:8013
FEATURE_FLAGS={"home-page-recommendation-bot": true}

Ensure you have courses and programs product setup on your local mitxonline http://mitxonline.odl.local:8013/api/v2/programs/

env/shared.local.env:

POSTHOG_PROJECT_API_KEY=
POSTHOG_PROJECT_ID=

course_card_clicked

Go to homepage featured courses
Open any resource drawer -> click on "Similar Learning Resources"
Go to a program page (e.g. /programs/program-v1:MITxT+18.01) → click a course card in "Required Courses" or "Elective Courses"

cta_clicked

Open any resource drawer → click the CTA button (e.g. "Learn More")

Go to a course product page → click the enrollment button
Go to a program product page → click the enrollment button

asktim_clicked

Go to homepage (/?recommender) → click the AskTIM button
Open a resource drawer → click the "AskTIM" syllabus bot toggle

Additional Context

github-actions · 2026-04-16T13:14:05Z

OpenAPI Changes

No changes detected

View full changelog

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

Copilot

Pull request overview

Adds PostHog analytics instrumentation for key user interactions across the Learn UI (resource cards, CTAs, AskTIM entry points, and MITxOnline product pages), supporting HQ issue tracking requirements.

Changes:

Introduces new PostHog event names (course_card_clicked, asktim_clicked) and captures them in several UI entry points.
Adds CTA click labeling for cta_clicked and updates the corresponding unit test expectation.
Enables click handlers to run for LinkAdapter “shallow” navigation (query-param pushState), so analytics can be captured for shallow links.

Reviewed changes

Copilot reviewed 11 out of 11 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
frontends/ol-components/src/components/LinkAdapter/LinkAdapter.tsx	Ensures `onClick` runs even for shallow pushState links.
frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx	Captures `course_card_clicked` for carousel card interactions.
frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx	Adds `label` to `cta_clicked` payload for drawer CTAs.
frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.test.tsx	Updates test to assert `label` is included in capture payload.
frontends/main/src/page-components/LearningResourceExpanded/AiChatSyllabusSlideDown.tsx	Captures `asktim_clicked` for syllabus-bot toggling.
frontends/main/src/page-components/AiChat/AskTimDrawerButton.tsx	Captures `asktim_clicked` for opening the homepage recommender drawer via shallow link.
frontends/main/src/common/constants.ts	Adds new PostHog event constants.
frontends/main/src/app-pages/ProductPages/ProgramPage.tsx	Passes section label into MITxOnline requirement cards for analytics context.
frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx	Captures `cta_clicked` for program enrollment button clicks.
frontends/main/src/app-pages/ProductPages/MitxOnlineResourceCard.tsx	Captures `course_card_clicked` for MITxOnline product requirement cards.
frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx	Captures `cta_clicked` for course enrollment button clicks.

Copilot · 2026-04-16T14:09:13Z

+      if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+        posthog.capture(PostHogEvents.CallToActionClicked, {
+          program,
+          label: program.title,
+        })
+      }


ProgramEnrollmentButton has a comprehensive test suite, but the new PostHog tracking path isn’t covered. Add a test that sets NEXT_PUBLIC_POSTHOG_API_KEY, mocks usePostHog().capture, clicks the enroll button, and asserts cta_clicked is captured with the expected properties (and that it does not fire when the env var is unset).

Copilot · 2026-04-16T14:09:14Z

+      if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
+        posthog.capture(PostHogEvents.CallToActionClicked, {
+          course,
+          label: course.title,
+        })
+      }


CourseEnrollmentButton has an existing test suite, but the new PostHog tracking path isn’t covered. Add a test that sets NEXT_PUBLIC_POSTHOG_API_KEY, mocks usePostHog().capture, triggers a click in an authenticated scenario, and asserts cta_clicked is captured with the expected payload.

gumaerc

I tested this and see tracking events flowing through, but there are a few things we should address:

Firstly, there is a bit of missing test coverage I think we should add, and I had AI summarize it:

Home page UAI card click tracking
- File: frontends/main/src/app-pages/HomePage/HomePage.test.tsx
- Add one test in the existing UAI Announcement Card describe block:
  - Enable UniversalAI flag
  - Click Learn about Universal AI link
  - Assert mocked capture was called with cta_clicked and payload including label plus readableId
Search page UAI banner click tracking
- File: frontends/main/src/app-pages/SearchPage/SearchPage.test.tsx
- Add one test in the existing UniversalAIBanner describe block:
  - Enable UniversalAISearchBanner flag with matching search term
  - Click Learn More link
  - Assert mocked capture was called with cta_clicked and payload including label plus readableId
AskTIM recommendation button click tracking
- File: frontends/main/src/page-components/AiChat/AskTimDrawerButton.test.tsx
- Add one test:
  - Click Ask TIM link
  - Assert mocked capture called with asktim_clicked and type recommendation_bot
AskTIM syllabus button click tracking
- File: frontends/main/src/page-components/LearningResourceExpanded/AiChatSyllabusSlideDown.test.tsx
- Add one test:
  - Render opener with a course/program resource
  - Click Ask TIM about this ...
  - Assert mocked capture called with asktim_clicked and syllabus payload fields
Carousel card click tracking
- File: frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.test.tsx
- Add one test:
  - Render carousel with at least one resource
  - Click card
  - Assert mocked capture called with course_card_clicked and key payload fields (label/resource id/readable id)
Product page requirement card tracking
- File: frontends/main/src/app-pages/ProductPages/ProgramPage.test.tsx
- Add one test:
  - Click a requirement card rendered via MitxOnlineResourceCard
  - Assert mocked capture called with course_card_clicked
Enrollment CTA tracking branch behavior
- Files:
  - frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.test.tsx
  - frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.test.tsx
- Add one authenticated click test per file:
  - Assert cta_clicked is captured
- Optional but useful:
  - Add one unauthenticated click test per file asserting no capture (if that is intended behavior)

gumaerc · 2026-04-16T19:16:54Z

@@ -91,6 +94,14 @@ const CourseEnrollmentButton: React.FC<CourseEnrollmentButtonProps> = ({
    if (me.isLoading) {
      return
    } else if (me.data?.is_authenticated) {


Currently this checks if the user is authenticated before firing the tracking event. Unauthenticated clicks should be tracked as well.

gumaerc · 2026-04-16T19:17:20Z

  const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    if (enrollments.isLoading || me.isLoading) {
      return
    } else if (me.data?.is_authenticated) {


Similarly here, we need to also track unauthenticated clicks.

…t buttons

…d and UniversalAIBanner

…entCard

…ssertion Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

…e.error Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

gumaerc

👍 LGTM!

rachellougee force-pushed the feat/posthog-event-tracking branch from 0e5962e to 5f8329e Compare April 16, 2026 13:34

rachellougee marked this pull request as ready for review April 16, 2026 13:58

Copilot AI review requested due to automatic review settings April 16, 2026 13:58

Copilot started reviewing on behalf of rachellougee April 16, 2026 14:00 View session

sentry Bot reviewed Apr 16, 2026

View reviewed changes

Comment thread frontends/main/src/page-components/LearningResourceExpanded/AiChatSyllabusSlideDown.tsx Outdated

Copilot AI reviewed Apr 16, 2026

View reviewed changes

rachellougee added the Needs Review An open Pull Request that is ready for review label Apr 16, 2026

gumaerc self-assigned this Apr 16, 2026

gumaerc requested changes Apr 16, 2026

View reviewed changes

rachellougee added 9 commits April 16, 2026 16:18

feat: implement PostHog event tracking for user interactions

2529dd9

fix code style issues

f026374

test: add label to event tracking for CallToActionSection

cd444b9

feedback

73c3ec1

feat: enhance PostHog event tracking for course and program enrollmen…

8cb4d6b

…t buttons

fix test

a92d723

feat: add PostHog event tracking for CTA clicks in UAIAnnouncementCar…

46cb320

…d and UniversalAIBanner

feat: remove resourceType from PostHog event tracking in UAIAnnouncem…

15175a6

…entCard

feedback

f587709

rachellougee force-pushed the feat/posthog-event-tracking branch from 5ccb9f3 to f587709 Compare April 16, 2026 20:20

rachellougee and others added 2 commits April 16, 2026 16:34

fix: add allowConsoleErrors to posthog tracking tests and fix label a…

9922d81

…ssertion Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

fix: mock enrollment POST in PostHog tracking tests to prevent consol…

0731124

…e.error Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

rachellougee requested a review from gumaerc April 16, 2026 20:59

gumaerc approved these changes Apr 16, 2026

View reviewed changes

rachellougee merged commit 1e8bf8d into main Apr 16, 2026
14 checks passed

rachellougee deleted the feat/posthog-event-tracking branch April 16, 2026 21:20

odlbot mentioned this pull request Apr 17, 2026

Release 0.63.7 #3224

Closed

10 tasks

rachellougee mentioned this pull request Apr 17, 2026

feat: track Stay Updated button click with PostHog cta_clicked event #3225

Merged

odlbot mentioned this pull request Apr 20, 2026

Release 0.64.0 #3226

Merged

16 tasks

rachellougee mentioned this pull request May 20, 2026

feat: add PostHog tracking for onboarding CTA interactions #3362

Merged

Conversation

rachellougee commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

How can this be tested?

Additional Context

Uh oh!

github-actions Bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

OpenAPI Changes

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

gumaerc left a comment

Choose a reason for hiding this comment

Uh oh!

gumaerc Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

gumaerc Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

gumaerc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rachellougee commented Apr 16, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading