feat(reference): act-1447 - added capture events to reference pages (M…

…etaMask#1394)

src/components/CodeTerminal/CodeTerminal.jsx

@@ -4,11 +4,7 @@ import TerminalViewBox from "./TerminalViewBox";
 import ControlPanel from "./ControlPanel";
 import { INFO_MSG } from "./AlertMsg";
 import MessageBox from "@site/src/components/MessageBox/MessageBox";
-import Select from 'react-dropdown-select';
 import { INIT_REQ_SET } from "@site/src/lib/constants";
-import {
-  trackClickForSegmentAnalytics
-} from "@site/src/lib/segmentAnalytics";
 import Heading from '@theme/Heading'
 
 const CodeTerminal = () => {
@@ -96,12 +92,6 @@ const CodeTerminal = () => {
         method: "GET"
       };
     }
-    trackClickForSegmentAnalytics({
-      type: "Submit Button",
-      clickText: "Send Request",
-      location: "https://docs.infura.io/",
-      userId: user.id,
-    });
     try {
       const res = await fetch(URL, params);
       if (res.ok) {

src/components/ParserOpenRPC/index.tsx

@@ -11,6 +11,12 @@ import global from "./global.module.css";
 import modalDrawerStyles from "./ModalDrawer/styles.module.css";
 import clsx from "clsx";
 import { useColorMode } from "@docusaurus/theme-common";
+import {
+  trackPageViewForSegment,
+  trackClickForSegment,
+  trackInputChangeForSegment
+} from "@site/src/lib/segmentAnalytics";
+import { useLocation } from "@docusaurus/router";
 
 interface ParserProps {
   network: NETWORK_NAMES;
@@ -36,7 +42,14 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
   const [drawerLabel, setDrawerLabel] = useState(null);
   const [isComplexTypeView, setIsComplexTypeView] = useState(false);
   const { colorMode } = useColorMode();
-  const openModal = () => setModalOpen(true);
+  const openModal = () => {
+    setModalOpen(true);
+    trackClickForSegment({
+      eventName: "Customize Request",
+      clickType: "Customize Request",
+      userExperience: "new"
+    })
+  };
   const closeModal = () => setModalOpen(false);
 
   const { netData } = usePluginData("plugin-json-rpc") as { netData?: ResponseItem[] };
@@ -75,16 +88,27 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
 
   if (currentMethodData === null) return null;
 
+  const location = useLocation();
+
   useEffect(() => {
     const installed = !!(window as any)?.ethereum;
     setMetamaskInstalled(installed);
+    trackPageViewForSegment({
+      name: "Reference page",
+      path: location.pathname,
+      userExperience: "new"
+    })
   }, []);
 
   const onParamsChangeHandle = (data) => {
     if (typeof data !== 'object' || data === null || Object.keys(data).length === 0) {
       setParamsData([]);
     }
     setParamsData(Object.values(data));
+    trackInputChangeForSegment({
+      eventName: "Request Configuration Started",
+      userExperience: "new"
+    })
   }
 
   const onSubmitRequestHandle = async () => {
@@ -94,6 +118,12 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
         params: paramsData
       })
       setReqResult(response);
+      trackClickForSegment({
+        eventName: "Request Sent",
+        clickType: "Request Sent",
+        userExperience: "new",
+        ...(response?.code && { responseStatus: response.code })
+      })
     } catch (e) {
       setReqResult(e);
     }

src/lib/segmentAnalytics.js

@@ -1,25 +1,45 @@
-export const trackClickForSegmentAnalytics = ({
-  type,
-  clickUrl,
-  clickText,
-  location,
-  userId,
+export const trackPageViewForSegment = ({
+  name,
+  path,
+  userExperience
 }) => {
   if (window.analytics) {
-    window.analytics.track(`CTA ${type} Clicked`, {
-      ...(clickUrl && { click_url: clickUrl }),
-      ...(clickText && { click_text: clickText }),
-      ...(location && { location }),
-      ...(userId && { user_id: userId }),
+    window.analytics.page("Page viewed", name, {
+      ...(path && { path: path }),
+      ...(userExperience && { user_experience: userExperience })
     });
   }
 };
 
-export const trackPageForSegmentAnalytics = ({ name, path, userId }) => {
+export const trackClickForSegment = ({
+  eventName,
+  clickType,
+  userExperience,
+  responseStatus,
+  responseMsg,
+  timestamp,
+}) => {
   if (window.analytics) {
-    window.analytics.page("Page view", name, {
-      ...(path && { path: path }),
-      ...(userId && { userId: userId }),
+    window.analytics.track(`CTA ${clickType} Clicked`, {
+      ...(eventName && { event_name: eventName }),
+      ...(userExperience && { user_experience: userExperience }),
+      ...(responseStatus && { response_status: responseStatus }),
+      ...(responseMsg && { response_msg: responseMsg }),
+      ...(timestamp && { timestamp: timestamp }),
     });
   }
 };
+
+export const trackInputChangeForSegment = ({
+  eventName,
+  userExperience,
+  timestamp,
+}) => {
+  if (window.analytics) {
+    window.analytics.track(`Input changed`, {
+      ...(eventName && { event_name: eventName }),
+      ...(userExperience && { user_experience: userExperience }),
+      ...(timestamp && { timestamp: timestamp }),
+    });
+  }
+};