Add CCIP metrics (#2029)

* Router address, chain selectors, onRamp address metrics * Add transferable tokens * Add Minted Tokens * Merge main and resolve conflicts * Refactor Address & CopyText components * Use canonical values in events * Refactor/standardize event & params structure * Add feeToken interaction
smartcontractkit · Aug 26, 2024 · 10f4e8f · 10f4e8f
1 parent c8f3b8d
commit 10f4e8f
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 8 deletions.
diff --git a/src/components/Address.tsx b/src/components/Address.tsx
@@ -7,11 +7,33 @@ export type Props = {
   endLength?: number
   urlClass?: string
   urlId?: string
+  eventName?: string
+  additionalInfo?: Record<string, string>
 }
 
-const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }: Props) => {
+const AddressComponent = ({
+  contractUrl,
+  address,
+  endLength,
+  urlClass,
+  urlId,
+  eventName,
+  additionalInfo = {}, // Default to an empty object if not provided
+}: Props) => {
   address = address || contractUrl.split("/").pop()
 
+  const handleClick = (e) => {
+    e.preventDefault()
+
+    if (eventName !== undefined) {
+      const dataLayerEvent = {
+        event: eventName,
+        ...additionalInfo,
+      }
+      window.dataLayer.push(dataLayerEvent)
+    }
+  }
+
   return (
     <span className={`addressContainer ${urlClass || ""}`} id={urlId}>
       <a title={address} className="addressLink" href={contractUrl}>
@@ -21,6 +43,7 @@ const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }:
         className={clsx("copyBtn", "copy-iconbutton")}
         style={{ height: "16px", width: "16px", minWidth: "12px" }}
         data-clipboard-text={address}
+        onClick={handleClick}
       >
         <img src="/assets/icons/copyIcon.svg" alt="Copy to clipboard" />
       </button>
@@ -38,6 +61,7 @@ const AddressComponent = ({ contractUrl, address, endLength, urlClass, urlId }:
           align-items: center;
           gap: var(--space-1x);
           word-break: break-word;
+          margin-top: 0;
         }
 
         .copyBtn {

diff --git a/src/components/CopyText.tsx b/src/components/CopyText.tsx
@@ -6,9 +6,11 @@ export type Props = {
   code?: boolean
   format?: boolean // determine if formatting is needed
   formatType?: "bytes32"
+  eventName?: string
+  additionalInfo?: Record<string, string>
 }
 
-const CopyContainer = ({ text, code, format, formatType }: Props) => {
+const CopyContainer = ({ text, code, format, formatType, eventName, additionalInfo = {} }: Props) => {
   // Function to format text based on format type
   const formatText = (text: string, type: string | undefined) => {
     if (type === "bytes32" && text.length > 10) {
@@ -24,13 +26,27 @@ const CopyContainer = ({ text, code, format, formatType }: Props) => {
 
   // Determine if formatting is needed
   const displayText = format ? formatText(text, formatType) : text
+
+  const handleClick = (e) => {
+    e.preventDefault()
+
+    if (eventName !== undefined) {
+      const dataLayerEvent = {
+        event: eventName,
+        ...additionalInfo,
+      }
+      window.dataLayer.push(dataLayerEvent)
+    }
+  }
+
   return (
     <span className="copyContainer">
       {code ? <code>{displayText}</code> : displayText}
       <button
         className={clsx("copyBtn", "copy-iconbutton")}
         style={{ height: "16px", width: "16px", minWidth: "12px" }}
         data-clipboard-text={text}
+        onClick={handleClick}
       >
         <img src="/assets/icons/copyIcon.svg" alt="Copy to clipboard" />
       </button>
@@ -43,6 +59,7 @@ const CopyContainer = ({ text, code, format, formatType }: Props) => {
           overflow: hidden;
           text-overflow: ellipsis;
           word-break: break-all;
+          margin-top: 0;
         }
 
         .copyBtn {

diff --git a/src/features/ccip/components/NetworkDropdown.tsx b/src/features/ccip/components/NetworkDropdown.tsx
@@ -233,6 +233,14 @@ export const NetworkDropdown = ({ userAddress }: Props) => {
     setToastMessage("1 CCIP-BnM has been sent to your wallet !")
     setIsLoading(LoadingState.END)
     setShowToast(true)
+
+    window.dataLayer.push({
+      event: "docs_product_interaction",
+      product: "CCIP",
+      action: "ccip_token_minted",
+      extraInfo1: "BnM",
+      extraInfo2: activeChain, // chainId
+    })
   }
 
   const mintLnMTokens = async () => {
@@ -273,6 +281,14 @@ export const NetworkDropdown = ({ userAddress }: Props) => {
     setToastMessage("1 CCIP-LnM has been sent to your wallet !")
     setIsLoading(LoadingState.END)
     setShowToast(true)
+
+    window.dataLayer.push({
+      event: "docs_product_interaction",
+      product: "CCIP",
+      action: "ccip_token_minted",
+      extraInfo1: "LnM",
+      extraInfo2: activeChain, // chainId
+    })
   }
 
   const closeToast = () => {

diff --git a/src/features/ccip/components/supported-networks/ChainConfig.astro b/src/features/ccip/components/supported-networks/ChainConfig.astro
@@ -16,12 +16,13 @@ import LaneConfig from "./LaneConfig.astro"
 
 type ConfigProps = {
   chainConfig: ChainConfig
+  chainTitle: string
   sourceChainRefId: string // id in reference directory
   environment: Environment
   version: Version
 }
 
-const { chainConfig, environment, sourceChainRefId, version } = Astro.props as ConfigProps
+const { chainConfig, chainTitle, environment, sourceChainRefId, version } = Astro.props as ConfigProps
 const { router, chainSelector, feeTokens } = chainConfig
 const sourceChainKey = directoryToSupportedChain(sourceChainRefId)
 const sourceChainTitle = getTitle(sourceChainKey)
@@ -84,12 +85,35 @@ const sortedLaneEntries = Object.entries(laneReferenceData).sort(
   <tbody>
     <tr>
       <td>Router address</td>
-      <td><Address contractUrl={routerExplorerUrl} /></td>
+      <td
+        ><Address
+          contractUrl={routerExplorerUrl}
+          eventName="docs_product_interaction"
+          additionalInfo={{
+            product: "CCIP",
+            action: "routerAddress_copied",
+            extraInfo1: sourceChainRefId,
+          }}
+          client:only="preact"
+        /></td
+      >
     </tr>
     <tr>
       <td><Tooltip tip="CCIP Blockchain identifier" label="Chain selector" style={{ marginTop: "0" }} client:load /></td
       >
-      <td><CopyText text={chainSelector} code /></td>
+      <td
+        ><CopyText
+          text={chainSelector}
+          eventName="docs_product_interaction"
+          additionalInfo={{
+            product: "CCIP",
+            action: "ccip_sourceChainSelector_copied",
+            extraInfo1: sourceChainRefId,
+          }}
+          code
+          client:only="preact"
+        /></td
+      >
     </tr>
     <tr>
       <td
@@ -100,7 +124,20 @@ const sortedLaneEntries = Object.entries(laneReferenceData).sort(
           client:load
         /></td
       >
-      <td><CopyText text={sourceChainId.toString()} code /></td>
+      <td
+        ><CopyText
+          text={sourceChainId.toString()}
+          eventName="docs_product_interaction"
+          additionalInfo={{
+            product: "CCIP",
+            action: "ccip_chainId_copied",
+            extraInfo1: sourceChainId.toString(),
+            extraInfo2: sourceChainRefId,
+          }}
+          code
+          client:only="preact"
+        /></td
+      >
     </tr>
     <tr>
       <td>Fee tokens</td>
@@ -115,6 +152,14 @@ const sortedLaneEntries = Object.entries(laneReferenceData).sort(
                     <Address
                       contractUrl={getExplorerAddressUrl(explorerUrl)(feeTokenWithAddress.address)}
                       endLength={7}
+                      eventName="docs_product_interaction"
+                      additionalInfo={{
+                        product: "CCIP",
+                        action: "ccip_feeToken_copied",
+                        extraInfo1: sourceChainRefId,
+                        extraInfo2: feeTokenWithAddress.token,
+                      }}
+                      client:only="preact"
                     />
                   </td>
                 </tr>

diff --git a/src/features/ccip/components/supported-networks/LaneConfig.astro b/src/features/ccip/components/supported-networks/LaneConfig.astro
@@ -165,11 +165,36 @@ if (supportedTokens) {
   <tbody>
     <tr>
       <td>OnRamp address</td>
-      <td><Address contractUrl={onRampExplorerUrl} /></td>
+      <td
+        ><Address
+          contractUrl={onRampExplorerUrl}
+          eventName="docs_product_interaction"
+          additionalInfo={{
+            product: "CCIP",
+            action: "ccip_onRampAddress_copied",
+            extraInfo1: sourceChain,
+            extraInfo2: destinationChainRefId,
+          }}
+          client:only="preact"
+        /></td
+      >
     </tr>
     <tr>
       <td>Destination chain selector</td>
-      <td><CopyText text={destinationChainSelector} code /></td>
+      <td
+        ><CopyText
+          text={destinationChainSelector}
+          code
+          eventName="docs_product_interaction"
+          additionalInfo={{
+            product: "CCIP",
+            action: "ccip_destinationChainSelector_copied",
+            extraInfo1: sourceChain,
+            extraInfo2: destinationChainRefId,
+          }}
+          client:only="preact"
+        /></td
+      >
     </tr>
   </tbody>
 </table>

diff --git a/src/features/ccip/components/supported-networks/Main.astro b/src/features/ccip/components/supported-networks/Main.astro
@@ -41,6 +41,7 @@ const sortedEntries = Object.entries(chainsReferenceData).sort(
           </div>
           <ChainConfig
             chainConfig={chainConfig}
+            chainTitle={chainTitle}
             sourceChain={chainKey}
             sourceChainRefId={chainRefId}
             environment={environment}

diff --git a/src/features/ccip/components/supported-networks/TokenSearch.tsx b/src/features/ccip/components/supported-networks/TokenSearch.tsx
@@ -156,6 +156,13 @@ const TokenSearch: FunctionComponent<TokenSearchProps> = ({ tokens, sourceChain
                       address={token.address}
                       contractUrl={getExplorerAddressUrl(explorerUrl)(token.address)}
                       endLength={4}
+                      eventName="docs_product_interaction"
+                      additionalInfo={{
+                        product: "CCIP",
+                        action: "ccip_supportedTokenAddress_copied",
+                        extraInfo1: sourceChain,
+                        extraInfo2: token.symbol,
+                      }}
                     />
                   </td>
                   <td style={{ whiteSpace: "nowrap" }}>{token.decimals}</td>