Implement segment events tracking

MetaMask · Sep 5, 2024 · 48ac4de · 48ac4de
1 parent 1c43fe4
commit 48ac4de
Show file tree

Hide file tree

Showing 10 changed files with 361 additions and 43 deletions.
diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import clsx from "clsx";
 import styles from "./accordion.module.scss";
 import CloseImg from "./close.svg";
+import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
 
 interface IAccordion {
   children: [React.ReactElement, React.ReactElement];
@@ -14,15 +15,32 @@ export default function Accordion({
 }: IAccordion) {
   const [isOpened, setIsOpened] = useState(opened);
 
-  const handleClose = () => {
+  const handleToggle = () => {
+    trackClickForSegment({
+      eventName: `${isOpened ? "Expanded" : "Collapsed"} - ${title}`,
+      clickType: "Accordion",
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
     setIsOpened((value) => !value);
   };
 
   return (
     <div className={styles.accordion}>
-      <div onClick={handleClose} className={styles.header}>
+      <div
+        role="button"
+        data-testid="accordion-title"
+        onClick={handleToggle}
+        className={styles.header}
+      >
         {title}
-        <span role="button" className={styles.closeButton}>
+        <span
+          role="button"
+          data-testid="accordion-button-x"
+          className={styles.closeButton}
+        >
           <CloseImg className={clsx(styles.image, isOpened && styles.opened)} />
         </span>
       </div>

diff --git a/src/components/Alert/index.tsx b/src/components/Alert/index.tsx
@@ -7,6 +7,7 @@ import SuccessImg from "./success.svg";
 import ErrorImg from "./error.svg";
 import Text from "@site/src/components/Text";
 import styles from "./alert.module.scss";
+import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
 
 export const options = {
   position: positions.TOP_CENTER,
@@ -18,25 +19,44 @@ export const options = {
   },
 };
 
-export const AlertTemplate = ({ style, options, message, close }) => (
-  <div
-    style={style}
-    className={clsx(
-      styles.alert,
-      options.type === types.INFO && styles.info,
-      options.type === types.SUCCESS && styles.success,
-      options.type === types.ERROR && styles.error,
-    )}
-  >
-    {options.type === types.INFO && <InfoImg className={styles.icon} />}
-    {options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
-    {options.type === types.ERROR && <ErrorImg className={styles.icon} />}
-    {message}
-    <span role="button" onClick={close} className={styles.closeButton}>
-      <CloseImg className={styles.closeIcon} />
-    </span>
-  </div>
-);
+export const AlertTemplate = ({ style, options, message, close }) => {
+  const handleCloseAlert = () => {
+    trackClickForSegment({
+      eventName: "Close",
+      clickType: "Alert",
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
+    close();
+  };
+
+  return (
+    <div
+      style={style}
+      className={clsx(
+        styles.alert,
+        options.type === types.INFO && styles.info,
+        options.type === types.SUCCESS && styles.success,
+        options.type === types.ERROR && styles.error,
+      )}
+    >
+      {options.type === types.INFO && <InfoImg className={styles.icon} />}
+      {options.type === types.SUCCESS && <SuccessImg className={styles.icon} />}
+      {options.type === types.ERROR && <ErrorImg className={styles.icon} />}
+      {message}
+      <span
+        role="button"
+        data-testid="alert-close"
+        onClick={handleCloseAlert}
+        className={styles.closeButton}
+      >
+        <CloseImg className={styles.closeIcon} />
+      </span>
+    </div>
+  );
+};
 
 export const AlertTitle = ({
   children,

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -5,6 +5,7 @@ import clsx from "clsx";
 import styles from "./button.module.scss";
 
 interface IButton {
+  testId?: string;
   onClick?: VoidFunction;
   children: string | React.ReactElement;
   disabled?: boolean;
@@ -17,6 +18,7 @@ interface IButton {
 }
 
 export const Button = ({
+  testId,
   className,
   onClick = () => {},
   children,
@@ -41,14 +43,20 @@ export const Button = ({
 
   return !href ? (
     <button
+      data-testid={testId}
       className={buttonRootClass}
       onClick={onClick}
       disabled={isLoading || disabled}
     >
       {isLoadingChild}
     </button>
   ) : (
-    <a className={buttonRootClass} href={href} target={target}>
+    <a
+      data-testid={testId}
+      className={buttonRootClass}
+      href={href}
+      target={target}
+    >
       {isLoadingChild}
     </a>
   );

diff --git a/src/components/Faucet/Alerts.tsx b/src/components/Faucet/Alerts.tsx
@@ -1,5 +1,50 @@
 import React from "react";
 import { AlertTitle, AlertText } from "@site/src/components/Alert";
+import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
+
+const handleClickCommonIssue = () => {
+  trackClickForSegment({
+    eventName: "Contact us",
+    clickType: `Common Issue Alert`,
+    userExperience: "B",
+    responseStatus: null,
+    responseMsg: null,
+    timestamp: Date.now(),
+  });
+};
+
+const handleClickBalanceLow = () => {
+  trackClickForSegment({
+    eventName: "Add funds using MetaMask",
+    clickType: `Low Balance Alert`,
+    userExperience: "B",
+    responseStatus: null,
+    responseMsg: null,
+    timestamp: Date.now(),
+  });
+};
+
+const handleClickCooldown = () => {
+  trackClickForSegment({
+    eventName: "Contact us",
+    clickType: `Cooldown Alert`,
+    userExperience: "B",
+    responseStatus: null,
+    responseMsg: null,
+    timestamp: Date.now(),
+  });
+};
+
+const handleClickViewTransaction = () => {
+  trackClickForSegment({
+    eventName: "View on Etherscan",
+    clickType: `Success Alert`,
+    userExperience: "B",
+    responseStatus: null,
+    responseMsg: null,
+    timestamp: Date.now(),
+  });
+};
 
 export const AlertCommonIssue = () => (
   <div>
@@ -8,7 +53,12 @@ export const AlertCommonIssue = () => (
       <span>
         There was an issue starting your transaction. Try again in a few
         minutes. If the problem persists please{" "}
-        <a target="_blank" href="https://support.metamask.io/">
+        <a
+          data-testid="alert-common-contact-us"
+          onClick={handleClickCommonIssue}
+          target="_blank"
+          href="https://support.metamask.io/"
+        >
           contact us
         </a>
         .
@@ -36,7 +86,12 @@ export const AlertBalanceTooLow = () => (
         Your current Ethereum address does not contain enough Ether on the
         Ethereum Mainnet. Please ensure you have at least 0.001 ETH before
         proceeding. You can easily add funds to your address using{" "}
-        <a className="underline" href="https://metamask.io/buy-crypto/">
+        <a
+          data-testid="alert-balance-add-funds"
+          onClick={handleClickBalanceLow}
+          className="underline"
+          href="https://metamask.io/buy-crypto/"
+        >
           MetaMask
         </a>
       </span>
@@ -50,7 +105,12 @@ export const AlertCooldown = () => (
     <AlertText>
       <span>
         You already got ETH from the faucet today. Try again in 24 hours.{" "}
-        <a target="_blank" href="https://support.metamask.io/">
+        <a
+          data-testid="alert-cooldown-contact-us"
+          onClick={handleClickCooldown}
+          target="_blank"
+          href="https://support.metamask.io/"
+        >
           Contact us
         </a>
         .
@@ -66,7 +126,12 @@ export const AlertSuccess = ({ url }: { url: string }) => (
       <span>
         Your transaction has been sent to the Ethereum/Sepolia network. You
         should be receiving your ETH shortly.{" "}
-        <a target="_blank" href={url}>
+        <a
+          data-testid="alert-success-etherscan"
+          onClick={handleClickViewTransaction}
+          target="_blank"
+          href={url}
+        >
           View on Etherscan
         </a>
         .

diff --git a/src/components/Faucet/Faq.tsx b/src/components/Faucet/Faq.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Accordion from "@site/src/components/Accordion";
 import Text from "@site/src/components/Text";
 import styles from "./faq.module.scss";
+import { trackClickForSegment } from "@site/src/lib/segmentAnalytics";
 
 interface IFaq {
   network: "linea" | "sepolia";
@@ -16,6 +17,50 @@ export default function Faq({
   classNameHeading,
   isLimitedUserPlan,
 }: IFaq) {
+  const handleClickContactUs = () => {
+    trackClickForSegment({
+      eventName: "Contact us",
+      clickType: `Link in ${network} FAQ`,
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
+  };
+
+  const handleClickLinea = () => {
+    trackClickForSegment({
+      eventName: "What is Linea",
+      clickType: `Link in ${network} FAQ`,
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
+  };
+
+  const handleClickDiscord = () => {
+    trackClickForSegment({
+      eventName: "Consensys Discord",
+      clickType: `Link in ${network} FAQ`,
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
+  };
+
+  const handleClickBridge = () => {
+    trackClickForSegment({
+      eventName: "Bridge",
+      clickType: `Link in ${network} FAQ`,
+      userExperience: "B",
+      responseStatus: null,
+      responseMsg: null,
+      timestamp: Date.now(),
+    });
+  };
+
   switch (network) {
     case "linea":
       return (
@@ -62,7 +107,12 @@ export default function Faq({
             </Text>
             <Text as="p" className={styles.accordionContainer}>
               <span>
-                <a target="_blank" href="https://linea.build">
+                <a
+                  data-testid="faq-linea-what-is-linea"
+                  onClick={handleClickLinea}
+                  target="_blank"
+                  href="https://linea.build"
+                >
                   Linea
                 </a>{" "}
                 is a type 2 zero knowledge Ethereum Virtual Machine (zkEVM). A
@@ -81,7 +131,12 @@ export default function Faq({
             </Text>
             <Text as="p" className={styles.accordionContainer}>
               <span>
-                <a target="_blank" href="https://support.metamask.io/">
+                <a
+                  data-testid="faq-linea-contact-us"
+                  onClick={handleClickContactUs}
+                  target="_blank"
+                  href="https://support.metamask.io/"
+                >
                   Contact us
                 </a>{" "}
                 with any issues or questions you have relating the faucet.
@@ -96,7 +151,12 @@ export default function Faq({
               <span>
                 Have ideas on how to improve the faucet? Awesome! We’d love to
                 hear them. Submit them{" "}
-                <a target="_blank" href="https://discord.com/invite/consensys">
+                <a
+                  data-testid="faq-linea-discord"
+                  onClick={handleClickDiscord}
+                  target="_blank"
+                  href="https://discord.com/invite/consensys"
+                >
                   here.
                 </a>
               </span>
@@ -111,6 +171,8 @@ export default function Faq({
                 Linea ETH were intially Goerli ETH that were bridged to Linea
                 using the canonical{" "}
                 <a
+                  data-testid="faq-linea-bridge"
+                  onClick={handleClickBridge}
                   target="_blank"
                   href="https://docs.linea.build/use-linea/bridge-funds"
                 >
@@ -167,7 +229,12 @@ export default function Faq({
             </Text>
             <Text as="p" className={styles.accordionContainer}>
               <span>
-                <a target="_blank" href="https://support.metamask.io/">
+                <a
+                  data-testid="faq-sepolia-contact-us"
+                  onClick={handleClickContactUs}
+                  target="_blank"
+                  href="https://support.metamask.io/"
+                >
                   Contact us
                 </a>{" "}
                 with any issues or questions you have relating the faucet.
@@ -182,7 +249,12 @@ export default function Faq({
               <span>
                 Have ideas on how to improve the faucet? Awesome! We’d love to
                 hear them. Submit them{" "}
-                <a target="_blank" href="https://discord.com/invite/consensys">
+                <a
+                  data-testid="faq-sepolia-discord"
+                  onClick={handleClickDiscord}
+                  target="_blank"
+                  href="https://discord.com/invite/consensys"
+                >
                   here.
                 </a>
               </span>