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

cowprotocol · Nov 25, 2024 · c1d6293 · c1d6293
1 parent 449fb27
commit c1d6293
Show file tree

Hide file tree

Showing 42 changed files with 198 additions and 436 deletions.
diff --git a/apps/cow-fi/components/AddRpcButton/index.tsx b/apps/cow-fi/components/AddRpcButton/index.tsx
@@ -2,7 +2,6 @@ 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 { Link, LinkType } from '@/components/Link'
@@ -32,7 +31,6 @@ export function AddRpcButton() {
   const { isConnected } = useAccount()
 
   const handleClick = async () => {
-    clickOnMevBlocker('click-add-rpc-to-wallet')
     try {
       if (connectAndAddToWallet) {
         // Start the connection process
@@ -44,7 +42,7 @@ export function AddRpcButton() {
         throw new Error('connectAndAddToWallet is not defined')
       }
     } catch (error) {
-      clickOnMevBlocker('click-add-rpc-to-wallet-error')
+      // No need to log error here as it's handled by the component
     }
   }
 
@@ -55,10 +53,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,7 +72,7 @@ export function AddRpcButton() {
             fontSize={21}
             color={'#FEE7CF'}
             bgColor="#EC4612"
-            onClick={handleClick}
+            data-click-event="click-add-rpc"
             disabled={disabledButton}
             asButton
           >

diff --git a/apps/cow-fi/components/ArticlesList.tsx b/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>

diff --git a/apps/cow-fi/components/CategoryLinks.tsx b/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>

diff --git a/apps/cow-fi/components/Layout/const.ts b/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',
   },
 ]
diff --git a/apps/cow-fi/components/TokensList/index.tsx b/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} />
         ) : (

diff --git a/apps/cow-fi/data/cow-amm/const.tsx b/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>

diff --git a/apps/cow-fi/data/cow-protocol/const.tsx b/apps/cow-fi/data/cow-protocol/const.tsx
@@ -30,7 +30,6 @@ import IMG_SMARTORDERS from '@cowprotocol/assets/images/image-smartorders.svg'
 import IMG_LOGO_NEXUS from '@cowprotocol/assets/images/logo-nexus-icon.svg'
 import IMG_LOGO_ENS from '@cowprotocol/assets/images/logo-ens-icon.svg'
 import IMG_LOGO_AAVE from '@cowprotocol/assets/images/logo-aave-icon.svg'
-import { clickOnCowProtocol } from 'modules/analytics'
 
 export const ADVANCED_ORDER_TYPES = [
   {
@@ -147,7 +146,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/intents"
           external
           utmContent="cow-protocol-introduction-intents"
-          onClick={() => clickOnCowProtocol('click-introduction-intents')}
+          data-click-event="click-introduction-intents"
         >
           intents
         </Link>
@@ -156,7 +155,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers"
           external
           utmContent="cow-protocol-introduction-solvers"
-          onClick={() => clickOnCowProtocol('click-introduction-solvers')}
+          data-click-event="click-introduction-solvers"
         >
           solvers
         </Link>
@@ -165,7 +164,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/batch-auctions"
           external
           utmContent="cow-protocol-introduction-batch-auctions"
-          onClick={() => clickOnCowProtocol('click-introduction-batch-auctions')}
+          data-click-event="click-introduction-batch-auctions"
         >
           batch auctions
         </Link>{' '}
@@ -178,12 +177,7 @@ export const FAQ_DATA = [
     answer: (
       <>
         CoW Protocol is the decentralized, permissionless DeFi protocol that powers{' '}
-        <Link
-          href="https://swap.cow.fi/"
-          external
-          utmContent="cow-protocol-cow-swap"
-          onClick={() => clickOnCowProtocol('click-cow-swap')}
-        >
+        <Link href="https://swap.cow.fi/" external utmContent="cow-protocol-cow-swap" data-click-event="click-cow-swap">
           CoW Swap
         </Link>{' '}
         and other DEX UIs. While CoW Swap is available as a trading venue for retail and institutional users, CoW
@@ -206,7 +200,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers"
           external
           utmContent="cow-protocol-introduction-solvers"
-          onClick={() => clickOnCowProtocol('click-introduction-solvers')}
+          data-click-event="click-introduction-solvers"
         >
           solvers
         </Link>{' '}
@@ -227,7 +221,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers"
           external
           utmContent="cow-protocol-introduction-solvers"
-          onClick={() => clickOnCowProtocol('click-introduction-solvers')}
+          data-click-event="click-introduction-solvers"
         >
           solvers
         </Link>{' '}
@@ -237,7 +231,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/how-it-works/coincidence-of-wants"
           external
           utmContent="cow-protocol-coincidence-of-wants"
-          onClick={() => clickOnCowProtocol('click-coincidence-of-wants')}
+          data-click-event="click-coincidence-of-wants"
         >
           Coincidences of Wants
         </Link>{' '}
@@ -266,7 +260,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/intents"
           external
           utmContent="cow-protocol-introduction-intents"
-          onClick={() => clickOnCowProtocol('click-introduction-intents')}
+          data-click-event="click-introduction-intents"
         >
           intent
         </Link>{' '}
@@ -277,7 +271,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers"
           external
           utmContent="cow-protocol-introduction-solvers"
-          onClick={() => clickOnCowProtocol('click-introduction-solvers')}
+          data-click-event="click-introduction-solvers"
         >
           solvers
         </Link>
@@ -288,7 +282,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers"
           external
           utmContent="cow-protocol-introduction-solvers"
-          onClick={() => clickOnCowProtocol('click-introduction-solvers')}
+          data-click-event="click-introduction-solvers"
         >
           solver
         </Link>{' '}
@@ -304,7 +298,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers"
           external
           utmContent="cow-protocol-introduction-solvers"
-          onClick={() => clickOnCowProtocol('click-introduction-solvers')}
+          data-click-event="click-introduction-solvers"
         >
           Solvers
         </Link>{' '}
@@ -313,7 +307,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/intents"
           external
           utmContent="cow-protocol-introduction-intents"
-          onClick={() => clickOnCowProtocol('click-introduction-intents')}
+          data-click-event="click-introduction-intents"
         >
           intent to trade message
         </Link>
@@ -322,7 +316,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/batch-auctions"
           external
           utmContent="cow-protocol-introduction-batch-auctions"
-          onClick={() => clickOnCowProtocol('click-introduction-batch-auctions')}
+          data-click-event="click-introduction-batch-auctions"
         >
           batch
         </Link>
@@ -332,7 +326,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/benefits/price-improvement"
           external
           utmContent="cow-protocol-price-improvement"
-          onClick={() => clickOnCowProtocol('click-price-improvement')}
+          data-click-event="click-price-improvement"
         >
           surplus
         </Link>{' '}
@@ -343,7 +337,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/tutorials/solvers"
           external
           utmContent="cow-protocol-tutorials-solvers"
-          onClick={() => clickOnCowProtocol('click-tutorials-solvers')}
+          data-click-event="click-tutorials-solvers"
         >
           CoW Protocol documentation
         </Link>
@@ -360,7 +354,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/intents"
           external
           utmContent="cow-protocol-introduction-intents"
-          onClick={() => clickOnCowProtocol('click-introduction-intents')}
+          data-click-event="click-introduction-intents"
         >
           intent to trade
         </Link>{' '}
@@ -369,7 +363,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers"
           external
           utmContent="cow-protocol-introduction-solvers"
-          onClick={() => clickOnCowProtocol('click-introduction-solvers')}
+          data-click-event="click-introduction-solvers"
         >
           solvers
         </Link>
@@ -380,7 +374,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/introduction/batch-auctions"
           external
           utmContent="cow-protocol-introduction-batch-auctions"
-          onClick={() => clickOnCowProtocol('click-introduction-batch-auctions')}
+          data-click-event="click-introduction-batch-auctions"
         >
           batch auction
         </Link>
@@ -392,7 +386,7 @@ export const FAQ_DATA = [
           href="https://docs.cow.fi/cow-protocol/concepts/benefits/mev-protection"
           external
           utmContent="cow-protocol-mev-protection"
-          onClick={() => clickOnCowProtocol('click-mev-protection')}
+          data-click-event="click-mev-protection"
         >
           prevents MEV
         </Link>
@@ -414,12 +408,7 @@ export const FAQ_DATA = [
         <br />
         <br />
         CoW DAO Discord:{' '}
-        <Link
-          href="https://discord.gg/cowprotocol"
-          external
-          utmContent="cow-discord"
-          onClick={() => clickOnCowProtocol('click-discord')}
-        >
+        <Link href="https://discord.gg/cowprotocol" external utmContent="cow-discord" data-click-event="click-discord">
           https://discord.gg/cowprotocol
         </Link>
       </>