feat: replace GA4 and use GTM with data-click-event

apps/cow-fi/components/AddRpcButton/index.tsx

@@ -2,8 +2,8 @@ import { Confetti } from '@cowprotocol/ui'
 import styled from 'styled-components/macro'
 import { darken, transparentize } from 'polished'
 import { useConnectAndAddToWallet } from '../../lib/hooks/useConnectAndAddToWallet'
-import { clickOnMevBlocker } from 'modules/analytics'
 import { useAccount } from 'wagmi'
+import { MouseEvent } from 'react'
 
 import { Link, LinkType } from '@/components/Link'
 
@@ -31,20 +31,14 @@ export function AddRpcButton() {
   const { errorMessage, state } = addWalletState
   const { isConnected } = useAccount()
 
-  const handleClick = async () => {
-    clickOnMevBlocker('click-add-rpc-to-wallet')
-    try {
-      if (connectAndAddToWallet) {
-        // Start the connection process
-        const connectionPromise = connectAndAddToWallet()
-
-        // Wait for the connection process to complete
-        await connectionPromise
-      } else {
-        throw new Error('connectAndAddToWallet is not defined')
+  const handleButtonClick = async (e: MouseEvent<HTMLAnchorElement & HTMLDivElement>) => {
+    e.preventDefault()
+    if (connectAndAddToWallet) {
+      try {
+        await connectAndAddToWallet()
+      } catch (error) {
+        console.error('Failed to connect wallet:', error)
       }
-    } catch (error) {
-      clickOnMevBlocker('click-add-rpc-to-wallet-error')
     }
   }
 
@@ -55,10 +49,10 @@ export function AddRpcButton() {
   const buttonLabel = isConnecting
     ? 'Connecting Wallet...'
     : isAdding
-    ? 'Adding to Wallet...'
-    : isConnected
-    ? 'Add MEV Blocker RPC'
-    : 'Get protected'
+      ? 'Adding to Wallet...'
+      : isConnected
+        ? 'Add MEV Blocker RPC'
+        : 'Get protected'
 
   return (
     <>
@@ -74,8 +68,9 @@ export function AddRpcButton() {
             fontSize={21}
             color={'#FEE7CF'}
             bgColor="#EC4612"
-            onClick={handleClick}
+            data-click-event="click-add-rpc"
             disabled={disabledButton}
+            onClick={handleButtonClick}
             asButton
           >
             {buttonLabel}

apps/cow-fi/components/ArticlesList.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { clickOnKnowledgeBase } from 'modules/analytics'
 import { LinkItem, LinkColumn } from '@/styles/styled'
 import { Article } from 'services/cms'
 
@@ -17,11 +16,7 @@ export const ArticlesList: React.FC<ArticlesListProps> = ({ articles }) => (
       const { slug, title } = article.attributes
 
       return (
-        <LinkItem
-          key={article.id}
-          href={`${ARTICLES_PATH}${slug}`}
-          onClick={() => clickOnKnowledgeBase(`click-article-${title}`)}
-        >
+        <LinkItem key={article.id} href={`${ARTICLES_PATH}${slug}`} data-click-event={`click-article-${title}`}>
           {title}
           <span>→</span>
         </LinkItem>

apps/cow-fi/components/CategoryLinks.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import styled from 'styled-components/macro'
-import { clickOnKnowledgeBase } from 'modules/analytics'
 import { Color, Media } from '@cowprotocol/ui'
 interface Category {
   name: string
@@ -91,16 +90,13 @@ const CategoryLinksWrapper = styled.ul<{ noDivider?: boolean }>`
 export const CategoryLinks: React.FC<CategoryLinksProps> = ({ allCategories, noDivider }) => (
   <CategoryLinksWrapper noDivider={noDivider}>
     <li>
-      <a href="/learn" onClick={() => clickOnKnowledgeBase('click-categories-home')}>
+      <a href="/learn" data-click-event="click-categories-home">
         Knowledge Base
       </a>
     </li>
     {allCategories.map((category) => (
       <li key={category.slug}>
-        <a
-          href={`/learn/topic/${category.slug}`}
-          onClick={() => clickOnKnowledgeBase(`click-categories-${category.name}`)}
-        >
+        <a href={`/learn/topic/${category.slug}`} data-click-event={`click-categories-${category.name}`}>
           {category.name}
         </a>
       </li>

apps/cow-fi/components/CopyToClipboard/index.tsx

@@ -1,7 +1,7 @@
 import { CopyIcon, CopyMessage, CopyWrapper } from '@/components/TokenDetails/index.styles'
 import { useEffect, useState } from 'react'
 
-export const CopyToClipboard = ({ text }: { text: string }) => {
+export const CopyToClipboard = ({ text, margin }: { text: string; margin?: string }) => {
   const [copied, setCopied] = useState(false)
 
   const copyToClipboard = async () => {
@@ -24,9 +24,11 @@ export const CopyToClipboard = ({ text }: { text: string }) => {
   }, [copied])
 
   return (
-    <CopyWrapper>
+    <>
+      <CopyWrapper margin={margin}>
+        <CopyIcon src="/images/icons/click-to-copy.svg" alt="Copy contract address" onClick={copyToClipboard} />
+      </CopyWrapper>
       {copied && <CopyMessage>Copied!</CopyMessage>}
-      <CopyIcon src="/images/icons/click-to-copy.svg" alt="Copy contract address" onClick={copyToClipboard} />
-    </CopyWrapper>
+    </>
   )
 }

apps/cow-fi/components/Layout/const.ts

@@ -1,5 +1,4 @@
 import { MenuItem, ProductVariant } from '@cowprotocol/ui'
-import { clickOnNavigation } from 'modules/analytics'
 
 export const PAGE_MAX_WIDTH = 1760
 export const THEME_MODE = 'dark'
@@ -81,20 +80,11 @@ export const NAV_ITEMS: MenuItem[] = [
 ]
 
 export const NAV_ADDITIONAL_BUTTONS = [
-  // {
-  //   label: 'Use MEV Blocker',
-  //   href: 'https://cow.fi/mev-blocker',
-  //   utmContent: 'menubar-nav-button-use-mev-blocker',
-  //   external: true,
-  //   isButton: true,
-  //   bgColor: '#EC4612',
-  //   color: '#FEE7CF',
-  // },
   {
     label: 'LP on CoW AMM',
     href: 'https://balancer.fi/pools/cow',
     utmContent: 'menubar-nav-button-lp-on-cow-amm',
-    onClick: () => clickOnNavigation('click-lp-on-cow-amm'),
+    'data-click-event': 'click-lp-on-cow-amm',
     external: true,
     isButton: true,
     bgColor: '#194D05',
@@ -104,10 +94,10 @@ export const NAV_ADDITIONAL_BUTTONS = [
     label: 'Trade on CoW Swap',
     href: 'https://swap.cow.fi/#/1/swap/USDC/COW',
     utmContent: 'menubar-nav-button-trade-on-cow-swap',
-    onClick: () => clickOnNavigation('click-trade-on-cow-swap'),
+    'data-click-event': 'click-trade-on-cow-swap',
     external: true,
     isButton: true,
     bgColor: '#65D9FF',
-    color: '#012F7A',
+    color: '#012F9A',
   },
 ]

apps/cow-fi/components/TokenDetails/index.styles.ts

@@ -64,7 +64,10 @@ export const SwapWidgetWrapper = styled.div`
   background: ${Color.neutral100};
   height: 26.2rem;
   width: 100%;
-  box-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.03), 0 2rem 7rem rgba(0, 0, 0, 0.06), 0 0.2rem 0.4rem rgba(0, 0, 0, 0.02);
+  box-shadow:
+    0 0.2rem 1.2rem rgba(0, 0, 0, 0.03),
+    0 2rem 7rem rgba(0, 0, 0, 0.06),
+    0 0.2rem 0.4rem rgba(0, 0, 0, 0.02);
   border-radius: 1.6rem;
   margin: 0 0 2rem;
   padding: 1.2rem;
@@ -287,12 +290,6 @@ export const SwapCard = styled.div`
   }
 `
 
-export const CopyMessage = styled.span`
-  color: #007b28;
-  font-size: 1.3rem;
-  margin: 0 0 0 0.2rem;
-`
-
 export const Stats = styled.div`
   margin: 1.2rem 0;
   display: flex;
@@ -323,27 +320,35 @@ export const StatValue = styled.h5`
 `
 
 export const CopyIcon = styled.img`
+  --size: 2rem;
+  height: var(--size);
+  width: var(--size);
   cursor: pointer;
   opacity: 0.6;
   transition: opacity 0.2s ease-in-out;
   padding: 0.2rem;
-  margin-left: 5px;
-  max-width: 20px;
 
   &:hover {
     opacity: 1;
   }
 `
 
-export const CopyWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  width: auto;
-  min-width: 100px;
-  text-align: right;
-  justify-content: flex-end;
+export const CopyWrapper = styled.div<{ margin?: string }>`
+  display: inline-block;
+  margin: ${({ margin }) => margin || 0};
 
   ${Media.upToSmall()} {
     justify-content: flex-start;
   }
 `
+export const CopyMessage = styled.span`
+  background: #007b28;
+  color: #fff;
+  font-size: 1.3rem;
+  display: block;
+  width: 100%;
+  padding: 0.4rem;
+  text-align: center;
+  border-radius: 0.4rem;
+  margin: 0.4rem 0 0;
+`

apps/cow-fi/components/TokensList/index.tsx

@@ -13,7 +13,6 @@ import {
   Wrapper,
   NoTokensText,
 } from './index.style'
-import { clickOnToken } from 'modules/analytics'
 
 export interface TokenListProps {
   tokens: TokenInfo[]
@@ -28,8 +27,8 @@ export function TokenList({ tokens }: TokenListProps) {
       tokens.filter(
         (token) =>
           token.name.toLowerCase().includes(search.toLowerCase()) ||
-          token.symbol.toLowerCase().includes(search.toLowerCase())
-      )
+          token.symbol.toLowerCase().includes(search.toLowerCase()),
+      ),
     )
   }, [search, tokens])
 
@@ -74,7 +73,7 @@ function TokenItem({ token, index }: TokenItemProps) {
     <ListItem key={id}>
       <span>{index + 1}</span>
 
-      <TokenLink href={`/tokens/${id}`} onClick={() => clickOnToken(name)}>
+      <TokenLink href={`/tokens/${id}`} data-click-event={`click-token-${name}`}>
         {image.large && image.large !== 'missing_large.png' ? (
           <img src={image.large} alt={name} />
         ) : (

apps/cow-fi/data/cow-amm/const.tsx

@@ -5,8 +5,6 @@ import IMG_COWAMM_LP_2 from '@cowprotocol/assets/images/image-cowamm-lp-2.svg'
 import IMG_COWAMM_LP_3 from '@cowprotocol/assets/images/image-cowamm-lp-3.svg'
 import IMG_COWAMM_LP_4 from '@cowprotocol/assets/images/image-cowamm-lp-4.svg'
 
-import { clickOnCowAmm } from 'modules/analytics'
-
 export const QUOTES = [
   {
     title:
@@ -180,7 +178,7 @@ export const FAQ_DATA = [
           href="https://pool-creator.balancer.fi/cow"
           external
           utmContent="cow-amm-pool-creator"
-          onClick={() => clickOnCowAmm('Content link click - FAQ:Contact us')}
+          data-click-event="Content link click - FAQ:Contact us"
         >
           CoW AMM pool creator
         </Link>
@@ -189,7 +187,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-amm/tutorials/cow-amm-deployer"
           external
           utmContent="cow-amm-deployer"
-          onClick={() => clickOnCowAmm('Content link click - FAQ:Deploy a pool')}
+          data-click-event="Content link click - FAQ:Deploy a pool"
         >
           follow these instructions in the CoW AMM docs
         </Link>{' '}
@@ -206,7 +204,7 @@ export const FAQ_DATA = [
           href="http://balancer.fi/pools/cow"
           external
           utmContent="cow-amm-balancer-pools"
-          onClick={() => clickOnCowAmm('Content link click - FAQ:Balancer pools')}
+          data-click-event="Content link click - FAQ:Balancer pools"
         >
           balancer.fi/pools/cow
         </Link>