Append UTM query params (#2430)

Author: jonkafton

frontends/main/src/page-components/LearningResourceExpanded/CallToActionSection.tsx

@@ -29,6 +29,7 @@ import {
 import type { User } from "api/hooks/user"
 import { PostHogEvents } from "@/common/constants"
 import VideoFrame from "./VideoFrame"
+import { kebabCase } from "lodash"
 
 const showChatClass = "show-chat"
 const showChatSelector = `.${showChatClass} &`
@@ -262,6 +263,23 @@ const getCallToActionText = (resource: LearningResource): string => {
   }
 }
 
+const buildCtaUrl = (url?: string | null, resourceTitle?: string) => {
+  if (!url) return "#"
+  try {
+    const parsedUrl = new URL(url)
+    parsedUrl.searchParams.set("utm_source", "mit-learn")
+    parsedUrl.searchParams.set("utm_medium", "referral")
+    if (resourceTitle) {
+      parsedUrl.searchParams.set("utm_content", kebabCase(resourceTitle))
+    }
+    return parsedUrl.toString()
+  } catch {
+    const separator = url.includes("?") ? "&" : "?"
+    const utm = `utm_source=mit-learn&utm_medium=referral${resourceTitle ? `&utm_content=${kebabCase(resourceTitle)}` : ""}`
+    return `${url}${separator}${utm}`
+  }
+}
+
 const CallToActionSection = ({
   imgConfig,
   resource,
@@ -322,7 +340,7 @@ const CallToActionSection = ({
           target="_blank"
           size="medium"
           endIcon={<RiExternalLinkLine />}
-          href={resource.url || ""}
+          href={buildCtaUrl(resource.url, resource.title)}
           onClick={() => {
             if (process.env.NEXT_PUBLIC_POSTHOG_API_KEY) {
               posthog.capture(PostHogEvents.CallToActionClicked, { resource })

frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx

@@ -10,6 +10,7 @@ import { PLATFORM_LOGOS } from "ol-components"
 import user from "@testing-library/user-event"
 import { renderWithProviders } from "@/test-utils"
 import { useFeatureFlagEnabled } from "posthog-js/react"
+import { kebabCase } from "lodash"
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest
@@ -95,7 +96,9 @@ describe("Learning Resource Expanded", () => {
           name: linkName,
         }) as HTMLAnchorElement
         expect(link.target).toBe("_blank")
-        expect(link.href).toMatch(new RegExp(`^${resource.url}/?$`))
+        expect(link.href).toBe(
+          `${resource.url?.replace(/\/$/, "")}/?utm_source=mit-learn&utm_medium=referral&utm_content=${kebabCase(resource.title)}`,
+        )
       }
     },
   )
@@ -134,9 +137,10 @@ describe("Learning Resource Expanded", () => {
   })
 
   test.each([ResourceTypeEnum.Program, ResourceTypeEnum.LearningPath])(
-    'Renders CTA button for resource type "%s"',
+    'Renders CTA button for resource type "%s" with UTM params',
     (resourceType) => {
       const resource = factories.learningResources.resource({
+        title: "Test Resource",
         resource_type: resourceType,
       })
 
@@ -148,7 +152,9 @@ describe("Learning Resource Expanded", () => {
           name: linkName,
         }) as HTMLAnchorElement
 
-        expect(link.href).toMatch(new RegExp(`^${resource.url}/?$`))
+        expect(link.href).toBe(
+          `${resource.url?.replace(/\/$/, "")}/?utm_source=mit-learn&utm_medium=referral&utm_content=test-resource`,
+        )
         expect(link.getAttribute("data-ph-action")).toBe("click-cta")
       }
     },