docs: track code copy + AI assistant event (#14193)

* docs: track code copy + AI assistant event

* add pathname to callback

www/apps/api-reference/components/Feedback/index.tsx

@@ -1,23 +1,24 @@
 "use client"
 
-import { Feedback as UiFeedback, FeedbackProps } from "docs-ui"
+import {
-import { usePathname } from "next/navigation"
+  Feedback as UiFeedback,
+  FeedbackProps,
+  DocsTrackingEvents,
+} from "docs-ui"
 import { useArea } from "../../providers/area"
 
 export const Feedback = (props: Partial<FeedbackProps>) => {
-  const pathname = usePathname()
   const { area } = useArea()
 
   return (
     <UiFeedback
       vertical={true}
       {...props}
-      event="survey_api-ref"
+      event={DocsTrackingEvents.SURVEY_API}
       extraData={{
         area,
         ...props.extraData,
       }}
-      pathName={`/api/${pathname}`}
     />
   )
 }

www/apps/book/components/Feedback/index.tsx

@@ -1,24 +1,17 @@
 "use client"
 
 import {
+  DocsTrackingEvents,
   Feedback as UiFeedback,
   FeedbackProps as UiFeedbackProps,
 } from "docs-ui"
-import { usePathname } from "next/navigation"
-import { basePathUrl } from "../../utils/base-path-url"
-import { useMemo } from "react"
 
 type FeedbackProps = Omit<UiFeedbackProps, "event" | "pathName">
 
 const Feedback = (props: FeedbackProps) => {
-  const pathname = usePathname()
-
-  const feedbackPathname = useMemo(() => basePathUrl(pathname), [pathname])
-
   return (
     <UiFeedback
-      event="survey"
+      event={DocsTrackingEvents.SURVEY}
-      pathName={feedbackPathname}
       question={props.question || "Was this chapter helpful?"}
       {...props}
     />

www/apps/cloud/components/Feedback/index.tsx

@@ -1,24 +1,17 @@
 "use client"
 
 import {
+  DocsTrackingEvents,
   Feedback as UiFeedback,
   FeedbackProps as UiFeedbackProps,
 } from "docs-ui"
-import { usePathname } from "next/navigation"
-import { basePathUrl } from "../../utils/base-path-url"
-import { useMemo } from "react"
 
 type FeedbackProps = Omit<UiFeedbackProps, "event" | "pathName">
 
 const Feedback = (props: FeedbackProps) => {
-  const pathname = usePathname()
-
-  const feedbackPathname = useMemo(() => basePathUrl(pathname), [pathname])
-
   return (
     <UiFeedback
-      event="survey"
+      event={DocsTrackingEvents.SURVEY}
-      pathName={feedbackPathname}
       question="Was this guide helpful?"
       {...props}
     />

www/apps/resources/components/Feedback/index.tsx

@@ -1,24 +1,17 @@
 "use client"
 
 import {
+  DocsTrackingEvents,
   Feedback as UiFeedback,
   FeedbackProps as UiFeedbackProps,
 } from "docs-ui"
-import { usePathname } from "next/navigation"
-import { useMemo } from "react"
-import { basePathUrl } from "../../utils/base-path-url"
 
 type FeedbackProps = Omit<UiFeedbackProps, "event" | "pathName">
 
 export const Feedback = (props: FeedbackProps) => {
-  const pathname = usePathname()
-
-  const feedbackPathname = useMemo(() => basePathUrl(pathname), [pathname])
-
   return (
     <UiFeedback
-      event="survey"
+      event={DocsTrackingEvents.SURVEY}
-      pathName={feedbackPathname}
       question="Was this page helpful?"
       {...props}
     />

www/apps/ui/components/Feedback/index.tsx

@@ -1,24 +1,17 @@
 "use client"
 
 import {
+  DocsTrackingEvents,
   Feedback as UiFeedback,
   FeedbackProps as UiFeedbackProps,
 } from "docs-ui"
-import { usePathname } from "next/navigation"
-import { basePathUrl } from "../../utils/base-path-url"
-import { useMemo } from "react"
 
 type FeedbackProps = Omit<UiFeedbackProps, "event" | "pathName">
 
 const Feedback = (props: FeedbackProps) => {
-  const pathname = usePathname()
-
-  const feedbackPathname = useMemo(() => basePathUrl(pathname), [pathname])
-
   return (
     <UiFeedback
-      event="survey"
+      event={DocsTrackingEvents.SURVEY}
-      pathName={feedbackPathname}
       question="Was this guide helpful?"
       {...props}
     />

www/apps/user-guide/components/Feedback/index.tsx

@@ -1,24 +1,17 @@
 "use client"
 
 import {
+  DocsTrackingEvents,
   Feedback as UiFeedback,
   FeedbackProps as UiFeedbackProps,
 } from "docs-ui"
-import { usePathname } from "next/navigation"
-import { basePathUrl } from "../../utils/base-path-url"
-import { useMemo } from "react"
 
 type FeedbackProps = Omit<UiFeedbackProps, "event" | "pathName">
 
 const Feedback = (props: FeedbackProps) => {
-  const pathname = usePathname()
-
-  const feedbackPathname = useMemo(() => basePathUrl(pathname), [pathname])
-
   return (
     <UiFeedback
-      event="survey"
+      event={DocsTrackingEvents.SURVEY}
-      pathName={feedbackPathname}
       question="Was this guide helpful?"
       {...props}
     />

www/packages/docs-ui/src/components/AiAssistant/ChatWindow/Input/index.tsx

@@ -1,10 +1,15 @@
 import React, { useEffect, useMemo, useRef } from "react"
 import clsx from "clsx"
 import { ArrowUpCircleSolid, LightBulb, LightBulbSolid } from "@medusajs/icons"
-import { useAiAssistant, useIsBrowser } from "../../../../providers"
+import {
+  useAiAssistant,
+  useAnalytics,
+  useIsBrowser,
+} from "../../../../providers"
 import { useChat, useDeepThinking } from "@kapaai/react-sdk"
 import { useAiAssistantChatNavigation } from "../../../../hooks"
 import { Tooltip } from "../../../Tooltip"
+import { DocsTrackingEvents } from "../../../../constants"
 
 type AiAssistantChatWindowInputProps = {
   chatWindowRef: React.RefObject<HTMLDivElement | null>
@@ -16,6 +21,7 @@ export const AiAssistantChatWindowInput = ({
   const { chatOpened, inputRef, loading, setChatOpened, isCaptchaLoaded } =
     useAiAssistant()
   const { submitQuery, conversation } = useChat()
+  const { track } = useAnalytics()
   const { active, toggle } = useDeepThinking()
   const { isBrowser } = useIsBrowser()
   const { searchQuery, searchQueryType } = useMemo(() => {
@@ -38,6 +44,13 @@ export const AiAssistantChatWindowInput = ({
   ) => {
     e?.preventDefault()
     submitQuery(overrideQuestion || question)
+    if (!conversation.length) {
+      track({
+        event: {
+          event: DocsTrackingEvents.AI_ASSISTANT_START_CHAT,
+        },
+      })
+    }
     setQuestion("")
   }
 

www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useEffect, useState } from "react"
-import { CopyButton } from "../../../.."
+import { CopyButton, DocsTrackingEvents, useAnalytics } from "../../../.."
 import clsx from "clsx"
 import { CheckMini, SquareTwoStack } from "@medusajs/icons"
 
@@ -15,6 +15,7 @@ export const CodeBlockCopyAction = ({
   inHeader,
 }: CodeBlockCopyActionProps) => {
   const [copied, setCopied] = useState(false)
+  const { track } = useAnalytics()
 
   useEffect(() => {
     if (copied) {
@@ -22,6 +23,12 @@ export const CodeBlockCopyAction = ({
         setCopied(false)
       }, 1000)
     }
+
+    track({
+      event: {
+        event: DocsTrackingEvents.CODE_BLOCK_COPY,
+      },
+    })
   }, [copied])
 
   const iconClassName = [

www/packages/docs-ui/src/components/CodeBlock/index.tsx

@@ -4,13 +4,13 @@ import React, { useEffect, useMemo, useRef, useState } from "react"
 import clsx from "clsx"
 import { Highlight, HighlightProps, themes, Token } from "prism-react-renderer"
 import { ApiRunner } from "@/components"
-import { useColorMode } from "@/providers"
+import { useAnalytics, useColorMode } from "@/providers"
 import { CodeBlockHeader, CodeBlockHeaderMeta } from "./Header"
 import { CodeBlockLine } from "./Line"
 import { ApiAuthType, ApiDataOptions, ApiMethod } from "types"
 // @ts-expect-error can't install the types package because it doesn't support React v19
 import { CSSTransition } from "react-transition-group"
-import { useCollapsibleCodeLines } from "../.."
+import { DocsTrackingEvents, useCollapsibleCodeLines } from "../.."
 import { HighlightProps as CollapsibleHighlightProps } from "@/hooks"
 import { CodeBlockActions, CodeBlockActionsProps } from "./Actions"
 import { CodeBlockCollapsibleButton } from "./Collapsible/Button"
@@ -103,6 +103,7 @@ export const CodeBlock = ({
   }
 
   const { colorMode } = useColorMode()
+  const { track } = useAnalytics()
   const [showTesting, setShowTesting] = useState(false)
   const codeContainerRef = useRef<HTMLDivElement>(null)
   const codeRef = useRef<HTMLElement>(null)
@@ -296,6 +297,14 @@ export const CodeBlock = ({
     )
   }, [codeContainerRef.current, codeRef.current])
 
+  const trackCopy = () => {
+    track({
+      event: {
+        event: DocsTrackingEvents.CODE_BLOCK_COPY,
+      },
+    })
+  }
+
   const actionsProps: Omit<CodeBlockActionsProps, "inHeader"> = useMemo(
     () => ({
       source,
@@ -435,6 +444,7 @@ export const CodeBlock = ({
                       "pl-docs_1",
                     preClassName
                   )}
+                  onCopy={trackCopy}
                 >
                   <code
                     className={clsx(

www/packages/docs-ui/src/components/Feedback/index.tsx

@@ -20,7 +20,6 @@ import { RadioGroup } from "@medusajs/ui"
 
 export type FeedbackProps = {
   event: string
-  pathName: string
   reportLink?: string
   question?: string
   positiveBtn?: string
@@ -55,7 +54,6 @@ const feedbackOptions = {
 
 export const Feedback = ({
   event,
-  pathName,
   reportLink: initReportLink,
   question = "Was this page helpful?",
   positiveBtn = "It was helpful",
@@ -106,15 +104,12 @@ export const Feedback = ({
       event: {
         event,
         options: {
-          url: pathName,
-          label: document.title,
           feedback:
             (feedback !== null && feedback) ||
             (feedback === null && positiveFeedback)
               ? "yes"
               : "no",
           message: message?.length ? message : null,
-          os: window.navigator.userAgent,
           feedbackOption,
           ...extraData,
         },
@@ -124,7 +119,6 @@ export const Feedback = ({
             resetForm()
           }
         },
-        tracker: ["segment", "posthog"],
       },
     })
   }

www/packages/docs-ui/src/constants.tsx

@@ -494,3 +494,10 @@ export const products: Product[] = [
     image: "/images/user-icon.png",
   },
 ]
+
+export enum DocsTrackingEvents {
+  SURVEY = "survey",
+  SURVEY_API = "survey_api-ref",
+  CODE_BLOCK_COPY = "code_block_copy",
+  AI_ASSISTANT_START_CHAT = "ai_assistant_start_chat",
+}

www/packages/docs-ui/src/providers/Analytics/index.tsx

@@ -10,6 +10,7 @@ import React, {
 import { useSegmentAnalytics } from "./providers/segment"
 import { usePostHogAnalytics } from "./providers/posthog"
 import { useReoDevAnalytics } from "./providers/reo-dev"
+import { usePathname } from "next/navigation"
 
 export type ExtraData = {
   section?: string
@@ -43,6 +44,8 @@ export type AnalyticsProviderProps = {
   children?: React.ReactNode
 }
 
+const DEFAULT_TRACKER: Trackers = "posthog"
+
 export const AnalyticsProvider = ({
   segmentWriteKey,
   reoDevKey,
@@ -55,12 +58,23 @@ export const AnalyticsProvider = ({
   })
   const { track: trackWithPostHog } = usePostHogAnalytics()
   useReoDevAnalytics({ reoDevKey })
+  const pathname = usePathname()
 
   const processEvent = useCallback(
     async (event: TrackedEvent) => {
-      const trackers = Array.isArray(event.tracker)
+      const trackers = !event.tracker
+        ? [DEFAULT_TRACKER]
+        : Array.isArray(event.tracker)
           ? event.tracker
           : [event.tracker]
+
+      event.options = {
+        url: pathname,
+        label: document.title,
+        os: window.navigator.userAgent,
+        ...event.options,
+      }
+
       await Promise.all(
         trackers.map(async (tracker) => {
           switch (tracker) {
@@ -73,7 +87,7 @@ export const AnalyticsProvider = ({
         })
       )
     },
-    [trackWithSegment, trackWithPostHog]
+    [trackWithSegment, trackWithPostHog, pathname]
   )
 
   const track = ({ event }: { event: TrackedEvent }) => {