docs: improved analytics and tracking (#13671)

* docs: improved analytics and tracking

* remove detailed feedback component

* remove ignore build script for api reference

* improvements

* fix pathname

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

@@ -1,83 +0,0 @@
-"use client"
-
-import { useState } from "react"
-import { Label, TextArea, useAnalytics, useModal, ModalFooter } from "docs-ui"
-
-const DetailedFeedback = () => {
-  const [improvementFeedback, setImprovementFeedback] = useState("")
-  const [positiveFeedback, setPositiveFeedback] = useState("")
-  const [additionalFeedback, setAdditionalFeedback] = useState("")
-  const { loaded, track } = useAnalytics()
-  const { closeModal } = useModal()
-
-  return (
-    <>
-      <div className="flex flex-col gap-1 overflow-auto py-1.5 px-2 lg:min-h-[400px]">
-        <div className="flex flex-col gap-1">
-          <Label>What should be improved in this API reference?</Label>
-          <TextArea
-            rows={4}
-            value={improvementFeedback}
-            onChange={(e) => setImprovementFeedback(e.target.value)}
-          />
-        </div>
-        <div className="flex flex-col gap-1">
-          <Label>Is there a feature you like in this API reference?</Label>
-          <TextArea
-            rows={4}
-            value={positiveFeedback}
-            onChange={(e) => setPositiveFeedback(e.target.value)}
-          />
-        </div>
-        <div className="flex flex-col gap-1">
-          <Label>Do you have any additional notes or feedback?</Label>
-          <TextArea
-            rows={4}
-            value={additionalFeedback}
-            onChange={(e) => setAdditionalFeedback(e.target.value)}
-          />
-        </div>
-      </div>
-      <ModalFooter
-        actions={[
-          {
-            children: "Save",
-            onClick: (e) => {
-              if (
-                !loaded ||
-                (!improvementFeedback &&
-                  !positiveFeedback &&
-                  !additionalFeedback)
-              ) {
-                return
-              }
-              const buttonElm = e.target as HTMLButtonElement
-              buttonElm.classList.add("cursor-not-allowed")
-              buttonElm.textContent = "Please wait"
-              track(
-                "api-ref-general-feedback",
-                {
-                  feedbackData: {
-                    improvementFeedback,
-                    positiveFeedback,
-                    additionalFeedback,
-                  },
-                },
-                function () {
-                  buttonElm.textContent = "Thank you!"
-                  setTimeout(() => {
-                    closeModal()
-                  }, 1000)
-                }
-              )
-            },
-            variant: "primary",
-          },
-        ]}
-        className="mt-1"
-      />
-    </>
-  )
-}
-
-export default DetailedFeedback

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

@@ -0,0 +1,23 @@
+"use client"
+
+import { Feedback as UiFeedback, FeedbackProps } from "docs-ui"
+import { usePathname } from "next/navigation"
+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"
+      extraData={{
+        area,
+        ...props.extraData,
+      }}
+      pathName={`/api/${pathname}`}
+    />
+  )
+}

www/apps/api-reference/components/Tags/Operation/DescriptionSection/index.tsx

@@ -7,9 +7,7 @@ import type { TagsOperationDescriptionSectionResponsesProps } from "./Responses"
 import dynamic from "next/dynamic"
 import TagsOperationDescriptionSectionParameters from "./Parameters"
 import MDXContentClient from "@/components/MDXContent/Client"
-import { useArea } from "../../../../providers/area"
 import {
-  Feedback,
   Badge,
   Link,
   FeatureFlagNotice,
@@ -17,10 +15,10 @@ import {
   Tooltip,
   MarkdownContent,
 } from "docs-ui"
-import { usePathname } from "next/navigation"
 import { TagsOperationDescriptionSectionWorkflowBadgeProps } from "./WorkflowBadge"
 import { TagsOperationDescriptionSectionEventsProps } from "./Events"
 import { TagsOperationDescriptionSectionDeprecationNoticeProps } from "./DeprecationNotice"
+import { Feedback } from "@/components/Feedback"
 
 const TagsOperationDescriptionSectionSecurity =
   dynamic<TagsOperationDescriptionSectionSecurityProps>(
@@ -58,9 +56,6 @@ type TagsOperationDescriptionSectionProps = {
 const TagsOperationDescriptionSection = ({
   operation,
 }: TagsOperationDescriptionSectionProps) => {
-  const { area } = useArea()
-  const pathname = usePathname()
-
   return (
     <>
       <H2>
@@ -127,14 +122,10 @@ const TagsOperationDescriptionSection = ({
         </>
       )}
       <Feedback
-        event="survey_api-ref"
         extraData={{
-          area,
           section: operation.summary,
         }}
-        pathName={pathname}
         className="!my-2"
-        vertical={true}
         question="Did this API Route run successfully?"
       />
       {operation.security && (

www/apps/api-reference/components/Tags/Section/index.tsx

@@ -19,8 +19,8 @@ import SectionContainer from "../../Section/Container"
 import { useArea } from "@/providers/area"
 import SectionDivider from "../../Section/Divider"
 import clsx from "clsx"
-import { Feedback, Loading, Link } from "docs-ui"
-import { usePathname, useRouter } from "next/navigation"
+import { Loading, Link } from "docs-ui"
+import { useRouter } from "next/navigation"
 import { OpenAPI } from "types"
 import TagSectionSchema from "./Schema"
 import checkElementInViewport from "../../../utils/check-element-in-viewport"
@@ -29,6 +29,7 @@ import useSWR from "swr"
 import basePathUrl from "../../../utils/base-path-url"
 import { getSectionId } from "docs-utils"
 import { RoutesSummary } from "./RoutesSummary"
+import { Feedback } from "../../Feedback"
 
 export type TagSectionProps = {
   tag: OpenAPI.TagObject
@@ -51,7 +52,6 @@ const TagSectionComponent = ({ tag }: TagSectionProps) => {
   const [loadData, setLoadData] = useState(false)
   const slugTagName = useMemo(() => getSectionId([tag.name]), [tag])
   const { area } = useArea()
-  const pathname = usePathname()
   const { scrollableElement, scrollToTop } = useScrollController()
   const { isBrowser } = useIsBrowser()
 
@@ -163,13 +163,9 @@ const TagSectionComponent = ({ tag }: TagSectionProps) => {
                 </p>
               )}
               <Feedback
-                event="survey_api-ref"
                 extraData={{
-                  area,
                   section: tag.name,
                 }}
-                pathName={pathname}
-                vertical
                 question="Was this section helpful?"
               />
             </div>