Redo Segment integration (#2119)

Author: alexandratran

docusaurus.config.js

@@ -12,8 +12,6 @@ const {
   MM_RPC_URL,
 } = require('./src/plugins/plugin-json-rpc')
 const codeTheme = themes.dracula
-const remarkCodesandbox = require('remark-codesandbox')
-const isProd = process.env.NODE_ENV === 'production'
 const helpDropdown = fs.readFileSync("./src/components/NavDropdown/DeveloperTools.html", "utf-8");
 const connectDropdown = fs.readFileSync("./src/components/NavDropdown/ConnectMetaMask.html", "utf-8");
 const embedDropdown = fs.readFileSync("./src/components/NavDropdown/EmbedMetaMask.html", "utf-8");
@@ -47,6 +45,7 @@ const config = {
     DASHBOARD_URL: process.env.DASHBOARD_URL || 'http://localhost:3000',
     SENTRY_KEY: process.env.SENTRY_KEY,
     LINEA_ENS_URL: process.env.LINEA_ENS_URL,
+    SEGMENT_ANALYTICS_KEY: process.env.SEGMENT_ANALYTICS_KEY,
   },
 
   trailingSlash: true,
@@ -55,11 +54,6 @@ const config = {
     {
       src: 'https://cmp.osano.com/AzZMxHTbQDOQD8c1J/84e64bce-4a70-4dcc-85cb-7958f22b2371/osano.js',
     },
-    {
-      src: 'https://plausible.io/js/script.js',
-      defer: true,
-      'data-domain': 'docs.metamask.io',
-    },
   ],
 
   markdown: {
@@ -197,16 +191,8 @@ const config = {
       },
     ],
     './src/plugins/plugin-json-rpc.ts',
-    isProd
-      ? [
-          'docusaurus-plugin-segment',
-          {
-            apiKey: process.env.SEGMENT_ANALYTICS_KEY,
-            load: { cookie: { sameSite: 'None', secure: true } },
-            page: true,
-          },
-        ]
-      : null,
+    // Custom Segment plugin for controlled analytics
+    './src/plugins/segment',
     './src/plugins/launchdarkly',
     './src/plugins/sentry',
   ],

package-lock.json

@@ -48,7 +48,6 @@
     "@types/react": "^18.3.3",
     "clsx": "^2.1.1",
     "docusaurus-plugin-sass": "^0.2.5",
-    "docusaurus-plugin-segment": "^1.0.4",
     "dotenv": "^16.4.7",
     "ethers": "^6.13.5",
     "js-cookie": "^3.0.5",

package.json

@@ -2,7 +2,6 @@ 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];
@@ -16,14 +15,6 @@ export default function Accordion({
   const [isOpened, setIsOpened] = useState(opened);
 
   const handleToggle = () => {
-    trackClickForSegment({
-      eventName: `${isOpened ? "Expanded" : "Collapsed"} - ${title}`,
-      clickType: "Accordion",
-      userExperience: "B",
-      responseStatus: null,
-      responseMsg: null,
-      timestamp: Date.now(),
-    });
     setIsOpened((value) => !value);
   };
 

src/components/Accordion/index.tsx

@@ -7,7 +7,6 @@ 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,
@@ -21,14 +20,6 @@ export const options = {
 
 export const AlertTemplate = ({ style, options, message, close }) => {
   const handleCloseAlert = () => {
-    trackClickForSegment({
-      eventName: "Close",
-      clickType: "Alert",
-      userExperience: "B",
-      responseStatus: null,
-      responseMsg: null,
-      timestamp: Date.now(),
-    });
     close();
   };
 

src/components/Alert/index.tsx

@@ -1,61 +1,5 @@
 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 handleClickPoh = () => {
-  trackClickForSegment({
-    eventName: 'PoH',
-    clickType: `PoH 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>
@@ -66,7 +10,6 @@ export const AlertCommonIssue = () => (
         persists please{' '}
         <a
           data-testid="alert-common-contact-us"
-          onClick={handleClickCommonIssue}
           target="_blank"
           href="https://support.metamask.io/">
           contact support
@@ -85,7 +28,6 @@ export const AlertFailedPoh = () => (
         Free users are required to complete Proof of Humanity to access the faucet. Learn more{' '}
         <a
           data-testid="alert-poh"
-          onClick={handleClickPoh}
           target="_blank"
           href="https://poh.linea.build/">
           here
@@ -115,7 +57,6 @@ export const AlertBalanceTooLow = () => (
         funds to your address using{' '}
         <a
           data-testid="alert-balance-add-funds"
-          onClick={handleClickBalanceLow}
           className="underline"
           href="https://metamask.io/buy-crypto/">
           MetaMask
@@ -134,7 +75,6 @@ export const AlertCooldown = () => (
         You already got ETH from the faucet today. Try again in 24 hours.{' '}
         <a
           data-testid="alert-cooldown-contact-us"
-          onClick={handleClickCooldown}
           target="_blank"
           href="https://support.metamask.io/">
           Contact us
@@ -154,7 +94,6 @@ export const AlertSuccess = ({ url }: { url: string }) => (
         shortly.{' '}
         <a
           data-testid="alert-success-etherscan"
-          onClick={handleClickViewTransaction}
           target="_blank"
           href={url}>
           View on Etherscan

src/components/Faucet/Alerts.tsx

@@ -2,7 +2,6 @@ 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'
@@ -12,49 +11,6 @@ interface IFaq {
 }
 
 export default function Faq({ network, className, 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':
@@ -100,7 +56,6 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
               <span>
                 <a
                   data-testid="faq-linea-what-is-linea"
-                  onClick={handleClickLinea}
                   target="_blank"
                   href="https://linea.build">
                   Linea
@@ -122,7 +77,6 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
               <span>
                 <a
                   data-testid="faq-linea-contact-us"
-                  onClick={handleClickContactUs}
                   target="_blank"
                   href="https://support.metamask.io/">
                   Contact support
@@ -140,7 +94,6 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
                 If you have ideas on how to improve the faucet, feel free to submit them on{' '}
                 <a
                   data-testid="faq-linea-discord"
-                  onClick={handleClickDiscord}
                   target="_blank"
                   href="https://discord.com/invite/consensys">
                   Discord.
@@ -158,7 +111,6 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
                 ETH comes from Sepolia ETH that is bridged to Linea using the canonical{' '}
                 <a
                   data-testid="faq-linea-bridge"
-                  onClick={handleClickBridge}
                   target="_blank"
                   href="https://bridge.linea.build">
                   bridge.
@@ -211,7 +163,6 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
               <span>
                 <a
                   data-testid="faq-sepolia-contact-us"
-                  onClick={handleClickContactUs}
                   target="_blank"
                   href="https://support.metamask.io/">
                   Contact support
@@ -229,7 +180,6 @@ export default function Faq({ network, className, classNameHeading, isLimitedUse
                 If you have ideas on how to improve the faucet, feel free to submit them on{' '}
                 <a
                   data-testid="faq-sepolia-discord"
-                  onClick={handleClickDiscord}
                   target="_blank"
                   href="https://discord.com/invite/consensys">
                   Discord.