diff --git a/apps/cow-fi/components/AddRpcButton/index.tsx b/apps/cow-fi/components/AddRpcButton/index.tsx index b277bfe854..f01a224f5f 100644 --- a/apps/cow-fi/components/AddRpcButton/index.tsx +++ b/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) => { + 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} diff --git a/apps/cow-fi/components/ArticlesList.tsx b/apps/cow-fi/components/ArticlesList.tsx index 7d0520b3c4..b531689dc0 100644 --- 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 = ({ articles }) => ( const { slug, title } = article.attributes return ( - clickOnKnowledgeBase(`click-article-${title}`)} - > + {title} β†’ diff --git a/apps/cow-fi/components/CategoryLinks.tsx b/apps/cow-fi/components/CategoryLinks.tsx index f3e825c64b..f24ae4a679 100644 --- 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 = ({ allCategories, noDivider }) => (
  • - clickOnKnowledgeBase('click-categories-home')}> + Knowledge Base
    • {allCategories.map((category) => (
  • - clickOnKnowledgeBase(`click-categories-${category.name}`)} - > + {category.name}
    • diff --git a/apps/cow-fi/components/CopyToClipboard/index.tsx b/apps/cow-fi/components/CopyToClipboard/index.tsx index baf6e9f0a3..af2ccb5910 100644 --- a/apps/cow-fi/components/CopyToClipboard/index.tsx +++ b/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 ( - + <> + + + {copied && Copied!} - - + ) } diff --git a/apps/cow-fi/components/Layout/const.ts b/apps/cow-fi/components/Layout/const.ts index 32945c6f6f..d1f8b1cf63 100644 --- 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/TokenDetails/index.styles.ts b/apps/cow-fi/components/TokenDetails/index.styles.ts index ef07d93b44..58ad4c312f 100644 --- a/apps/cow-fi/components/TokenDetails/index.styles.ts +++ b/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; +` diff --git a/apps/cow-fi/components/TokensList/index.tsx b/apps/cow-fi/components/TokensList/index.tsx index eb83ddc8fa..1b070ae2ea 100644 --- 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) { {index + 1} - clickOnToken(name)}> + {image.large && image.large !== 'missing_large.png' ? ( {name} ) : ( diff --git a/apps/cow-fi/data/cow-amm/const.tsx b/apps/cow-fi/data/cow-amm/const.tsx index 67defe9955..7a49b950c1 100644 --- 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 @@ -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 {' '} @@ -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 diff --git a/apps/cow-fi/data/cow-protocol/const.tsx b/apps/cow-fi/data/cow-protocol/const.tsx index 692a0c2eac..5a31b333a6 100644 --- 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 @@ -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 @@ -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 {' '} @@ -178,12 +177,7 @@ export const FAQ_DATA = [ answer: ( <> CoW Protocol is the decentralized, permissionless DeFi protocol that powers{' '} - clickOnCowProtocol('click-cow-swap')} - > + CoW Swap {' '} 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 {' '} @@ -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 {' '} @@ -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 {' '} @@ -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 {' '} @@ -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 @@ -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 {' '} @@ -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 {' '} @@ -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 @@ -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 @@ -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 {' '} @@ -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 @@ -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 {' '} @@ -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 @@ -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 @@ -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 @@ -414,12 +408,7 @@ export const FAQ_DATA = [

    CoW DAO Discord:{' '} - clickOnCowProtocol('click-discord')} - > + https://discord.gg/cowprotocol diff --git a/apps/cow-fi/data/cow-swap/const.tsx b/apps/cow-fi/data/cow-swap/const.tsx index 9f9ee339f2..eff3d628f5 100644 --- a/apps/cow-fi/data/cow-swap/const.tsx +++ b/apps/cow-fi/data/cow-swap/const.tsx @@ -9,7 +9,6 @@ import IMG_COWSWAP_TWAP from '@cowprotocol/assets/images/image-cowswap-twap.svg' import IMG_COWSWAP_GASLESS from '@cowprotocol/assets/images/image-cowswap-gasless.svg' import IMG_COWSWAP_NOFEES from '@cowprotocol/assets/images/image-cowswap-nofees.svg' import IMG_COWSWAP_MULTIPLE from '@cowprotocol/assets/images/image-cowswap-multiple.svg' -import { clickOnCowSwap } from 'modules/analytics' export const COW_IS_DIFFERENT = [ { @@ -101,7 +100,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/cow-protocol/concepts/introduction/intents" external utmContent="cow-protocol-introduction-intents" - onClick={() => clickOnCowSwap('click-introduction-intents')} + data-click-event="click-introduction-intents" > intents {' '} @@ -110,7 +109,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/cow-protocol/concepts/introduction/batch-auctions" external utmContent="cow-protocol-introduction-batch-auctions" - onClick={() => clickOnCowSwap('click-introduction-batch-auctions')} + data-click-event="click-introduction-batch-auctions" > batch auctions{' '} @@ -121,7 +120,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers" external utmContent="cow-protocol-introduction-solvers" - onClick={() => clickOnCowSwap('click-introduction-solvers')} + data-click-event="click-introduction-solvers" > solvers {' '} @@ -130,7 +129,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/cow-protocol/concepts/introduction/intents" external utmContent="cow-protocol-introduction-intents" - onClick={() => clickOnCowSwap('click-introduction-intents')} + data-click-event="click-introduction-intents" > trade intent {' '} @@ -139,7 +138,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={() => clickOnCowSwap('click-coincidence-of-wants')} + data-click-event="click-coincidence-of-wants" > Coincidences of Wants {' '} @@ -168,7 +167,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={() => clickOnCowSwap('click-coincidence-of-wants')} + data-click-event="click-coincidence-of-wants" > Coincidence of Wants @@ -180,7 +179,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/cow-protocol/concepts/introduction/batch-auctions" external utmContent="cow-protocol-introduction-batch-auctions" - onClick={() => clickOnCowSwap('click-introduction-batch-auctions')} + data-click-event="click-introduction-batch-auctions" > batching mechanism @@ -202,7 +201,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/cow-protocol/concepts/introduction/solvers" external utmContent="cow-protocol-introduction-solvers" - onClick={() => clickOnCowSwap('click-introduction-solvers')} + data-click-event="click-introduction-solvers" > solvers {' '} @@ -238,7 +237,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/cow-protocol/concepts/introduction/batch-auctions" external utmContent="cow-protocol-introduction-batch-auctions" - onClick={() => clickOnCowSwap('click-introduction-batch-auctions')} + data-click-event="click-introduction-batch-auctions" > batch auctions {' '} @@ -256,7 +255,7 @@ export const FAQ_DATA = [ <> Please beware of fake links and phishing scams. The official CoW DAO channels can be found at the footer of all our pages on{' '} - clickOnCowSwap('click-website')}> + www.cow.fi . @@ -265,32 +264,17 @@ export const FAQ_DATA = [ For reference, here is our full list of social channels:
    X:{' '} - clickOnCowSwap('click-twitter')} - > + https://x.com/CoWSwap
    Discord:{' '} - clickOnCowSwap('click-discord')} - > + https://discord.gg/cowprotocol
    Forum:{' '} - clickOnCowSwap('click-forum')} - > + https://forum.cow.fi/
    @@ -299,18 +283,13 @@ export const FAQ_DATA = [ href="https://snapshot.org/#/cow.eth" external utmContent="cow-snapshot" - onClick={() => clickOnCowSwap('click-snapshot')} + data-click-event="click-snapshot" > https://snapshot.org/#/cow.eth
    Github:{' '} - clickOnCowSwap('click-github')} - > + https://github.com/cowprotocol/ @@ -330,12 +309,7 @@ export const FAQ_DATA = [

    CoW DAO Discord:{' '} - clickOnCowSwap('click-discord')} - > + https://discord.gg/cowprotocol diff --git a/apps/cow-fi/data/home/const.tsx b/apps/cow-fi/data/home/const.tsx index 7e41d0fd0b..b1f472540d 100644 --- a/apps/cow-fi/data/home/const.tsx +++ b/apps/cow-fi/data/home/const.tsx @@ -22,7 +22,6 @@ import { } from '@/styles/styled' import { Link, LinkType } from '@/components/Link' import SVG from 'react-inlinesvg' -import { clickOnHome } from 'modules/analytics' export const PRODUCT_LIST = [ { @@ -142,9 +141,9 @@ export const PRODUCT_CONTAINERS = ( color={topic.linkColor} href={topic.linkHref} linkType={LinkType.TopicButton} - onClick={() => clickOnHome(topic.linkEvent)} external={topic.linkExternal} utmContent={topic.linkUtmContent} + data-click-event={topic.linkEvent} > {topic.linkText} diff --git a/apps/cow-fi/data/mev-blocker/const.tsx b/apps/cow-fi/data/mev-blocker/const.tsx index 839fe2194c..2ce361ddfc 100644 --- a/apps/cow-fi/data/mev-blocker/const.tsx +++ b/apps/cow-fi/data/mev-blocker/const.tsx @@ -20,7 +20,6 @@ import IMAGE_MEVBLOCKER_REVIEW_6 from '@cowprotocol/assets/images/image-mevblock import IMAGE_FULLPROTECTION from '@cowprotocol/assets/images/image-fullprotection.svg' import IMGAGE_FASTFREE from '@cowprotocol/assets/images/image-fastfree.svg' import IMAGE_PROFIT from '@cowprotocol/assets/images/image-profit.svg' -import { clickOnMevBlocker } from 'modules/analytics' export const MEV_BLOCKER_LIST = [ { @@ -165,8 +164,8 @@ export const FAQ_DATA = [ clickOnMevBlocker('click-contact-us')} + utmContent="mev-blocker-contact-us" + data-click-event="click-contact-us" > Get in touch {' '} @@ -206,12 +205,7 @@ export const FAQ_DATA = [

    While some DEXs like{' '} - clickOnMevBlocker('click-cow-swap')} - > + CoW Swap {' '} offer MEV protection for your DeFi trades, most DeFi venues and NFT marketplaces do not provide any type of MEV @@ -239,7 +233,7 @@ export const FAQ_DATA = [ <> To use MEV Blocker, you will need to add the MEV Blocker RPC endpoint to your wallet. You can do that easily by following the instructions{' '} - clickOnMevBlocker('click-rpc')}> + here . (Note that once your MEV Blocker is added to your wallet, you might need to check that it is your selected @@ -290,7 +284,7 @@ export const FAQ_DATA = [
    This separate endpoint focuses on providing revert protection first, at the expense of possibly slower inclusion time. You can use this second endpoint by using{' '} - clickOnMevBlocker('click-noreverts')}> + https://rpc.mevblocker.io/noreverts {' '} as the url instead. @@ -303,7 +297,7 @@ export const FAQ_DATA = [ <> Yes! if you want your transactions to be completely private, and you don’t care about the refund, you need to connect to the following endpoint:{' '} - clickOnMevBlocker('click-norefunds')}> + https://rpc.mevblocker.io/norefunds {' '} as the url instead. @@ -338,7 +332,7 @@ export const FAQ_DATA = [ href="https://cow.fi/" external utmContent="mev-blocker-cow-protocol" - onClick={() => clickOnMevBlocker('click-cow-protocol')} + data-click-event="click-cow-protocol" > CoW Protocol @@ -347,17 +341,12 @@ export const FAQ_DATA = [ href="https://agnostic-relay.net/" external utmContent="mev-blocker-agnostic" - onClick={() => clickOnMevBlocker('click-agnostic')} + data-click-event="click-agnostic" > Agnostic Relay , and{' '} - clickOnMevBlocker('click-beaver')} - > + Beaver Build . It is open to all searchers and block builders. @@ -378,7 +367,7 @@ export const FAQ_DATA = [ href="https://docs.cow.fi/mevblocker" external utmContent="mev-blocker-docs" - onClick={() => clickOnMevBlocker('click-docs')} + data-click-event="click-docs" > documentation {' '} @@ -387,7 +376,7 @@ export const FAQ_DATA = [ href="https://t.me/+yonLSGoFPRI0YTFk" external utmContent="mev-blocker-telegram" - onClick={() => clickOnMevBlocker('click-telegram')} + data-click-event="click-telegram" > join the community @@ -405,7 +394,7 @@ export const FAQ_DATA = [ href="https://t.me/+yonLSGoFPRI0YTFk" external utmContent="mev-blocker-telegram" - onClick={() => clickOnMevBlocker('click-telegram')} + data-click-event="click-telegram" > Telegram diff --git a/apps/cow-fi/lib/analytics/initGtm.ts b/apps/cow-fi/lib/analytics/initGtm.ts new file mode 100644 index 0000000000..6625a6b596 --- /dev/null +++ b/apps/cow-fi/lib/analytics/initGtm.ts @@ -0,0 +1,25 @@ +const DEFAULT_GTM_ID = 'GTM-TBX4BV5M' + +export function initGtm(gtmId: string = DEFAULT_GTM_ID) { + if (typeof window === 'undefined') return + + // Add script to head + const script = document.createElement('script') + script.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': + new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], + j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= + 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); + })(window,document,'script','dataLayer','${gtmId}');` + document.head.insertBefore(script, document.head.firstChild) + + // Add noscript iframe to body + const noscript = document.createElement('noscript') + const iframe = document.createElement('iframe') + iframe.src = `https://www.googletagmanager.com/ns.html?id=${gtmId}` + iframe.height = '0' + iframe.width = '0' + iframe.style.display = 'none' + iframe.style.visibility = 'hidden' + noscript.appendChild(iframe) + document.body.insertBefore(noscript, document.body.firstChild) +} diff --git a/apps/cow-fi/lib/hooks/useConnect.ts b/apps/cow-fi/lib/hooks/useConnect.ts index 4057ea26e4..ede1a14dee 100644 --- a/apps/cow-fi/lib/hooks/useConnect.ts +++ b/apps/cow-fi/lib/hooks/useConnect.ts @@ -2,21 +2,19 @@ import { useAccount, useConnect as useConnectWagmi } from 'wagmi' import { useCallback, useEffect, useState } from 'react' import { useConnectModal } from '@rainbow-me/rainbowkit' import { ConnectResult, PublicClient } from '@wagmi/core' -import { clickOnMevBlocker } from '../../modules/analytics' export function useConnect() { const { isConnected } = useAccount() const { openConnectModal } = useConnectModal() const { connectAsync, connectors } = useConnectWagmi() const [connectionPromise, setConnectionPromise] = useState | undefined> | null>( - null + null, ) const injectedConnector = connectors.find((c) => c.id === 'injected') useEffect(() => { if (isConnected && connectionPromise) { - clickOnMevBlocker('wallet-connected') setConnectionPromise(null) } }, [isConnected, connectionPromise]) diff --git a/apps/cow-fi/lib/hooks/useConnectAndAddToWallet.ts b/apps/cow-fi/lib/hooks/useConnectAndAddToWallet.ts index d914f5d0b3..0ac5ec005c 100644 --- a/apps/cow-fi/lib/hooks/useConnectAndAddToWallet.ts +++ b/apps/cow-fi/lib/hooks/useConnectAndAddToWallet.ts @@ -4,7 +4,6 @@ import { useDisconnect, useWalletClient } from 'wagmi' import { handleRpcError } from '@/util/handleRpcError' import { useAddRpcWithTimeout } from './useAddRpcWithTimeout' import { AddToWalletState, AddToWalletStateValues } from '@/components/AddRpcButton' -import { clickOnMevBlocker } from '../../modules/analytics' const DEFAULT_STATE: AddToWalletState = { state: 'unknown', autoConnect: false } const ADDING_STATE: AddToWalletState = { state: 'adding', autoConnect: false } @@ -28,17 +27,15 @@ export function useConnectAndAddToWallet(): UseConnectAndAddToWalletProps { console.error(`[connectAndAddToWallet] handleError`, error) const { errorMessage: message, isError, isUserRejection } = handleRpcError(error) if (isUserRejection) { - clickOnMevBlocker('click-add-rpc-to-wallet-user-rejected') setState({ state: 'unknown', errorMessage: 'User rejected the request', autoConnect: false }) } else if (isError) { - clickOnMevBlocker('click-add-rpc-to-wallet-error') setState({ state: 'error', errorMessage: message || undefined, autoConnect: false }) } else { setState(DEFAULT_STATE) } setAddRpcPromise(null) }, - [setState] + [setState], ) const addToWallet = useAddRpcWithTimeout({ @@ -46,19 +43,19 @@ export function useConnectAndAddToWallet(): UseConnectAndAddToWalletProps { addingPromise, onAdding(newAddRpcPromise) { console.debug('[connectAndAddToWallet] Adding RPC...') - clickOnMevBlocker('click-add-rpc-to-wallet-adding') + setAddRpcPromise(newAddRpcPromise) setState(ADDING_STATE) }, onAdded() { console.debug('[connectAndAddToWallet] πŸŽ‰ RPC has been added!') - clickOnMevBlocker('click-add-rpc-to-wallet-added-success') + setState(ADDED_STATE) setAddRpcPromise(null) }, onTimeout(errorMessage: string, newState: AddToWalletStateValues) { console.debug(`[connectAndAddToWallet] New State: ${newState}. Message`, errorMessage) - clickOnMevBlocker('click-add-rpc-to-wallet-timeout') + setState({ state: newState, errorMessage: errorMessage || undefined, @@ -77,12 +74,12 @@ export function useConnectAndAddToWallet(): UseConnectAndAddToWalletProps { return new Promise((resolve, reject) => { if (!isConnected) { console.debug('[useConnectAndAddToWallet] Connecting...') - clickOnMevBlocker('click-add-rpc-to-wallet-connecting') + connect() .then((result) => { if (result) { console.debug('[useConnectAndAddToWallet] πŸ”Œ Connected!') - clickOnMevBlocker('click-add-rpc-to-wallet-connected') + addToWallet() resolve() } else { @@ -97,7 +94,7 @@ export function useConnectAndAddToWallet(): UseConnectAndAddToWalletProps { }) } else { console.debug('[useConnectAndAddToWallet] Already connected. Adding RPC endpoint...') - clickOnMevBlocker('click-add-rpc-to-wallet-connected') + addToWallet() resolve() } @@ -105,7 +102,6 @@ export function useConnectAndAddToWallet(): UseConnectAndAddToWalletProps { }, [isConnected, connect, addToWallet, handleError, walletClient]) const disconnectWallet = useCallback(() => { - clickOnMevBlocker('click-disconnect-wallet') disconnect() setState(DEFAULT_STATE) }, [disconnect]) diff --git a/apps/cow-fi/modules/analytics/events.ts b/apps/cow-fi/modules/analytics/events.ts deleted file mode 100644 index 11f2070a35..0000000000 --- a/apps/cow-fi/modules/analytics/events.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { initCowAnalyticsGoogle } from '@cowprotocol/analytics' - -// Loads Analytics with GTM -export const cowAnalytics = initCowAnalyticsGoogle(true) - -export enum Category { - HOME = 'Homepage', - NAVIGATION = 'Navigation', - WIDGET = 'Widget', - COWAMM = 'CoW AMM', - COWSWAP = 'CoW Swap', - COWPROTOCOL = 'CoW Protocol', - MEVBLOCKER = 'MEV Blocker', - DAOS = 'DAOs', - KNOWLEDGEBASE = 'Knowledge Base', - ERROR404 = 'Error 404', - CAREERS = 'Careers', - TOKENS = 'Tokens', - LEGAL = 'Legal', -} - -export const WidgetEvents = { - CONFIGURE_WIDGET: { category: Category.WIDGET, action: 'Configure Widget' }, - READ_DOCS: { category: Category.WIDGET, action: 'Read Docs' }, - READ_TERMS: { category: Category.WIDGET, action: 'Read Terms and Conditions' }, - TALK_TO_US: { category: Category.WIDGET, action: 'Talk To Us' }, -} - -export function clickOnToken(name: string) { - cowAnalytics.sendEvent({ - category: Category.TOKENS, - action: `click-token-${name}`, - }) -} - -export function clickOnCowAmm(event: string) { - cowAnalytics.sendEvent({ - category: Category.COWAMM, - action: event, - }) -} - -export function clickOnCowProtocol(event: string) { - cowAnalytics.sendEvent({ - category: Category.COWPROTOCOL, - action: event, - }) -} - -export function clickOnCowSwap(event: string) { - cowAnalytics.sendEvent({ - category: Category.COWSWAP, - action: event, - }) -} - -export function clickOnMevBlocker(event: string) { - cowAnalytics.sendEvent({ - category: Category.MEVBLOCKER, - action: event, - }) -} - -export function clickOnError404GoHome() { - cowAnalytics.sendEvent({ - category: Category.ERROR404, - action: 'click-homepage', - }) -} - -export function clickOnDaos(event: string) { - cowAnalytics.sendEvent({ - category: Category.DAOS, - action: event, - }) -} - -export function clickOnHome(event: string) { - cowAnalytics.sendEvent({ - category: Category.HOME, - action: event, - }) -} - -export function clickOnWidget(event: string) { - cowAnalytics.sendEvent({ - category: Category.HOME, - action: event, - }) -} - -export function clickOnCareers(event: string) { - cowAnalytics.sendEvent({ - category: Category.CAREERS, - action: event, - }) -} - -export function clickOnKnowledgeBase(event: string) { - cowAnalytics.sendEvent({ - category: Category.KNOWLEDGEBASE, - action: event, - }) -} - -export function clickOnLegal(event: string) { - cowAnalytics.sendEvent({ - category: Category.LEGAL, - action: event, - }) -} - -export function clickOnNavigation(event: string) { - cowAnalytics.sendEvent({ - category: Category.NAVIGATION, - action: event, - }) -} diff --git a/apps/cow-fi/modules/analytics/index.ts b/apps/cow-fi/modules/analytics/index.ts deleted file mode 100644 index def94ce450..0000000000 --- a/apps/cow-fi/modules/analytics/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './events' diff --git a/apps/cow-fi/pages/404.tsx b/apps/cow-fi/pages/404.tsx index 9cdb216df8..ba5df12d40 100644 --- a/apps/cow-fi/pages/404.tsx +++ b/apps/cow-fi/pages/404.tsx @@ -7,7 +7,6 @@ import { Link } from '@/components/Link' import { PageWrapper, ContainerCard, ArticleContent, ArticleMainTitle, BodyContent } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnError404GoHome } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -32,8 +31,8 @@ export default function Page({ siteConfigData }: PageProps) {

    This page could not be found. Please go back to the{' '} - - homepage + + Go to homepage {' '} or use the navigation menu to find what you are looking for.

    diff --git a/apps/cow-fi/pages/_app.tsx b/apps/cow-fi/pages/_app.tsx index 49bbe0b0dd..4ea2eef21a 100644 --- a/apps/cow-fi/pages/_app.tsx +++ b/apps/cow-fi/pages/_app.tsx @@ -8,13 +8,18 @@ import { apolloClient } from 'services/uniswap-price/apollo-client' import { useInitializeUtm } from 'modules/utm' import { WithLDProvider } from '@/components/WithLDProvider' import { ThemeProvider } from '../theme' -import { CowAnalyticsProvider } from '@cowprotocol/analytics' -import { cowAnalytics } from 'modules/analytics' +import { useEffect } from 'react' +import { initGtm } from '@/lib/analytics/initGtm' export default function App(props: AppProps) { const { Component, pageProps } = props useInitializeUtm() + // Initialize GTM on mount + useEffect(() => { + initGtm() + }, []) + const router = useRouter() const CURRENT_URL = `${CONFIG.url.root}${router.asPath}` @@ -57,9 +62,7 @@ export default function App(props: AppProps) { - - - + diff --git a/apps/cow-fi/pages/careers/index.tsx b/apps/cow-fi/pages/careers/index.tsx index 0f0f2ca79a..79b840acf3 100644 --- a/apps/cow-fi/pages/careers/index.tsx +++ b/apps/cow-fi/pages/careers/index.tsx @@ -21,7 +21,6 @@ import { } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnCareers } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -99,7 +98,7 @@ export default function Page({ siteConfigData, jobsData }: PageProps) { utmContent={`job-${title}`} margin="auto auto 0 0" marginTablet="auto auto 0" - onClick={() => clickOnCareers(`click-job-${title}`)} + data-click-event={`click-job-${title}`} > Apply @@ -130,7 +129,7 @@ export default function Page({ siteConfigData, jobsData }: PageProps) { linkType={LinkType.TopicButton} href={`https://jobs.ashbyhq.com/cow-dao/${id}`} utmContent={`job-${title}`} - onClick={() => clickOnCareers(`click-job-${title}`)} + data-click-event={`click-job-${title}`} > Apply @@ -157,11 +156,11 @@ export default function Page({ siteConfigData, jobsData }: PageProps) { earn up to $6,000 in USD or USDC.{' '} clickOnCareers(`click-refer-to-earn`)} + linkType={LinkType.TopicButton} + data-click-event="click-refer-to-earn" > Refer-to-Earn details diff --git a/apps/cow-fi/pages/careers/refer-to-earn.tsx b/apps/cow-fi/pages/careers/refer-to-earn.tsx index 0e65881231..359ff69054 100644 --- a/apps/cow-fi/pages/careers/refer-to-earn.tsx +++ b/apps/cow-fi/pages/careers/refer-to-earn.tsx @@ -8,7 +8,6 @@ import Layout from '@/components/Layout' import { ContainerCard, ArticleContent, Breadcrumbs, ArticleMainTitle, BodyContent } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnCareers } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -38,7 +37,7 @@ export default function Page({ siteConfigData }: PageProps) { - clickOnCareers('click-breadcrumb-careers')}> + Careers Refer-to-Earn diff --git a/apps/cow-fi/pages/cow-amm.tsx b/apps/cow-fi/pages/cow-amm.tsx index 6966e5132b..69c6bb7357 100644 --- a/apps/cow-fi/pages/cow-amm.tsx +++ b/apps/cow-fi/pages/cow-amm.tsx @@ -41,7 +41,6 @@ import IMG_ICON_FAQ from '@cowprotocol/assets/images/icon-faq.svg' import { FAQ_DATA, QUOTES, LVR_CONTENT, COW_AMM_CONTENT } from '@/data/cow-amm/const' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnCowAmm } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -69,8 +68,8 @@ export default function Page() { href="https://balancer.fi/pools/cow" external linkType={LinkType.HeroButton} + data-click-event="click-lp-on-cow-amm" utmContent={'cow-amm-hero-button-lp-on-cow-amm'} - onClick={() => clickOnCowAmm('click-lp-on-cow-amm')} > LP on CoW AMM β†— @@ -103,7 +102,7 @@ export default function Page() { external linkType={LinkType.SectionTitleButton} utmContent={'cow-amm-metrics-button-view-all'} - onClick={() => clickOnCowAmm('click-view-all-metrics')} + data-click-event="click-view-all-metrics" > View all metrics on DUNE ↗ diff --git a/apps/cow-fi/pages/cow-protocol.tsx b/apps/cow-fi/pages/cow-protocol.tsx index 55b08c7c88..7acadd5cd0 100644 --- a/apps/cow-fi/pages/cow-protocol.tsx +++ b/apps/cow-fi/pages/cow-protocol.tsx @@ -59,7 +59,6 @@ import { } from '@/data/cow-protocol/const' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnCowProtocol } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -88,7 +87,7 @@ export default function Page() { href="https://docs.cow.fi/category/tutorials" external linkType={LinkType.HeroButton} - onClick={() => clickOnCowProtocol('click-hero-start-building')} + data-click-event="click-hero-start-building" > Start building @@ -122,7 +121,7 @@ export default function Page() { external linkType={LinkType.SectionTitleButton} utmContent="cow-protocol-metrics" - onClick={() => clickOnCowProtocol('click-metrics-view-all')} + data-click-event="click-metrics-view-all" > View all metrics on DUNE ↗ @@ -171,7 +170,7 @@ export default function Page() { bgColor="#66018E" color="#F996EE" href="/learn" - onClick={() => clickOnCowProtocol('click-intents-learn-more')} + data-click-event="click-intents-learn-more" linkType={LinkType.TopicButton} > Learn more @@ -215,7 +214,7 @@ export default function Page() { bgColor="#66018E" color="#F996EE" href="/learn" - onClick={() => clickOnCowProtocol('click-solvers-learn-more')} + data-click-event="click-solvers-learn-more" linkType={LinkType.TopicButton} > Learn more @@ -239,7 +238,7 @@ export default function Page() { color="#F996EE" href="/learn" linkType={LinkType.TopicButton} - onClick={() => clickOnCowProtocol('click-batch-auctions-learn-more')} + data-click-event="click-batch-auctions-learn-more" > Learn more @@ -413,7 +412,7 @@ export default function Page() { href={`${logo.url}?utm_source=cow.fi&utm_medium=web&utm_content=cow-protocol-logos`} target="_blank" rel="noopener noreferrer nofollow" - onClick={() => clickOnCowProtocol(`click-logo-${logo.alt}`)} + data-click-event={`click-logo-${logo.alt}`} > clickOnCowProtocol(`click-case-study-${study.title}`)} + data-click-event={`click-case-study-${study.title}`} > Read more @@ -462,7 +461,7 @@ export default function Page() { href={`${logo.url}?utm_source=cow.fi&utm_medium=web&utm_content=cow-protocol-logos`} target="_blank" rel="noopener noreferrer nofollow" - onClick={() => clickOnCowProtocol(`click-logo-${logo.alt}`)} + data-click-event={`click-logo-${logo.alt}`} > clickOnCowProtocol(topic.linkEvent)} + data-click-event={topic.linkEvent} utmContent={topic.linkUtmContent} external={topic.linkHref.startsWith('http')} > @@ -552,8 +551,8 @@ export default function Page() { external linkType={LinkType.SectionTitleButton} utmContent="cow-protocol-solvers" + data-click-event="click-solvers-read-docs" margin="28px 0 0" - onClick={() => clickOnCowProtocol(`click-solvers-read-docs`)} > Read the docs diff --git a/apps/cow-fi/pages/cow-swap.tsx b/apps/cow-fi/pages/cow-swap.tsx index b52f4578c3..67dfbaeb2e 100644 --- a/apps/cow-fi/pages/cow-swap.tsx +++ b/apps/cow-fi/pages/cow-swap.tsx @@ -41,7 +41,6 @@ import IMG_ICON_FAQ from '@cowprotocol/assets/images/icon-faq.svg' import { FAQ_DATA, TWEETS, COW_IS_DIFFERENT, ADVANCED_ORDER_TYPES, BETTER_UX } from '@/data/cow-swap/const' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' import LazyLoadTweet from '@/components/LazyLoadTweet' -import { clickOnCowSwap } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -99,7 +98,7 @@ export default function Page({ tweets }: PageProps) { external linkType={LinkType.HeroButton} utmContent="cow-swap-launch-app-button" - onClick={() => clickOnCowSwap('click-launch-app')} + data-click-event="click-launch-app" > Launch app @@ -132,7 +131,7 @@ export default function Page({ tweets }: PageProps) { external linkType={LinkType.SectionTitleButton} utmContent="cow-swap-metrics-link" - onClick={() => clickOnCowSwap('click-metrics-link')} + data-click-event="click-metrics-link" > View all metrics on DUNE ↗ @@ -193,7 +192,7 @@ export default function Page({ tweets }: PageProps) { color="#012F7A" href="/cow-protocol" linkType={LinkType.SectionTitleButton} - onClick={() => clickOnCowSwap('click-learn-about-cow-protocol')} + data-click-event="click-learn-about-cow-protocol" > Learn about CoW Protocol @@ -413,7 +412,7 @@ export default function Page({ tweets }: PageProps) { external linkType={LinkType.SectionTitleButton} utmContent="cow-swap-launch-app-button" - onClick={() => clickOnCowSwap('click-launch-app')} + data-click-event="click-launch-app" > Launch app diff --git a/apps/cow-fi/pages/daos.tsx b/apps/cow-fi/pages/daos.tsx index 6fdd4b428e..9b42d9b3d3 100644 --- a/apps/cow-fi/pages/daos.tsx +++ b/apps/cow-fi/pages/daos.tsx @@ -46,7 +46,6 @@ import { Swiper, SwiperSlide } from 'swiper/react' import { Autoplay, Pagination, Navigation } from 'swiper/modules' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnDaos } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -169,7 +168,7 @@ export default function Page() { href="https://github.com/charlesndalton/milkman" external utmContent="link-to-milkman" - onClick={() => clickOnDaos('click-milkman')} + data-click-event="click-milkman" > Milkman bot @@ -228,7 +227,7 @@ export default function Page() { href="https://dump.services/" external utmContent="link-to-dump-services" - onClick={() => clickOnDaos('click-dump-services')} + data-click-event="click-dump-services" > Dump.services @@ -256,9 +255,9 @@ export default function Page() { href="https://blog.cow.fi/list/advanced-order-types-b391bd4390cb" linkType={LinkType.SectionTitleButton} utmContent="link-to-advanced-order-types" + data-click-event="click-advanced-order-types" margin="24px auto 0" external - onClick={() => clickOnDaos('click-advanced-order-types')} > Explore advanced order types @@ -301,9 +300,9 @@ export default function Page() { clickOnDaos(`click-${dao.title.toLowerCase()}`)} + utmContent={`dao-${dao.title.toLowerCase().replace(/\s/g, '-')}`} + data-click-event={`click-${dao.title.toLowerCase()}`} > Learn more @@ -318,7 +317,7 @@ export default function Page() { href={`${dao.link}?utm_source=cow.fi&utm_medium=web&utm_content=dao-${dao.title}`} target="_blank" rel="noopener noreferrer" - onClick={() => clickOnDaos(`click-${dao.title.toLowerCase()}`)} + data-click-event={`click-${dao.title.toLowerCase()}`} > clickOnHome('click-cow-knowledge-base-learn-more')} > Learn more @@ -90,11 +89,7 @@ export default function Page() { Governance Anyone can join CoW DAO by holding{' '} - clickOnHome('click-cow-tokens')} - external - > + COW tokens . Tokenholders contribute to CoW DAO's mission by participating in "CoWmunity" discussions on Discord, @@ -111,7 +106,7 @@ export default function Page() { href={social.href} rel="noopener noreferrer" target="_blank" - onClick={() => clickOnHome(social.linkEvent)} + data-click-event={social.linkEvent} > @@ -135,11 +130,11 @@ export default function Page() { innovation, and ecosystem development. clickOnHome('click-apply-for-a-grant')} + external + data-click-event="click-apply-for-a-grant" > Explore grants diff --git a/apps/cow-fi/pages/learn/[article].tsx b/apps/cow-fi/pages/learn/[article].tsx index 0bfde9776f..66f298590e 100644 --- a/apps/cow-fi/pages/learn/[article].tsx +++ b/apps/cow-fi/pages/learn/[article].tsx @@ -43,7 +43,6 @@ import { CategoryLinks } from '@/components/CategoryLinks' import { Link, LinkType } from '@/components/Link' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnKnowledgeBase } from 'modules/analytics' import { CmsImage } from '@cowprotocol/ui' import { useLazyLoadImages } from 'hooks/useLazyLoadImages' @@ -193,10 +192,10 @@ export default function ArticlePage({ - clickOnKnowledgeBase('click-breadcrumbs-home')}> + Home - clickOnKnowledgeBase('click-breadcrumbs-knowledge-base')}> + Knowledge Base {title} @@ -207,8 +206,8 @@ export default function ArticlePage({ {categories.data.map((category: { id: string; attributes?: { slug?: string; name?: string } }) => ( clickOnKnowledgeBase(`click-category-${category.attributes?.name}`)} + href={`/learn/topics/${category.attributes?.slug}`} + data-click-event={`click-category-${category.attributes?.name}`} > {category.attributes?.name ?? ''} @@ -258,7 +257,7 @@ export default function ArticlePage({
  • clickOnKnowledgeBase(`click-related-article-${article.attributes?.title}`)} + data-click-event={`click-related-article-${article.attributes?.title}`} > {article.attributes?.title} @@ -284,7 +283,7 @@ export default function ArticlePage({ clickOnKnowledgeBase(`click-read-more-${article.attributes?.title}`)} + data-click-event={`click-read-more-${article.attributes?.title}`} > {imageUrl && ( diff --git a/apps/cow-fi/pages/learn/articles/[[...page]].tsx b/apps/cow-fi/pages/learn/articles/[[...page]].tsx index a423d415b6..5be87a9d74 100644 --- a/apps/cow-fi/pages/learn/articles/[[...page]].tsx +++ b/apps/cow-fi/pages/learn/articles/[[...page]].tsx @@ -20,7 +20,6 @@ import { } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnKnowledgeBase } from 'modules/analytics' const LEARN_PATH = '/learn/' const ARTICLES_PATH = `${LEARN_PATH}articles/` @@ -95,7 +94,7 @@ const ArticlesPage = ({ - clickOnKnowledgeBase('click-breadcrumbs-home')}> + Knowledge Base

    All articles

    @@ -116,7 +115,7 @@ const ArticlesPage = ({ key={i} href={`${ARTICLES_PATH}${i + 1}`} className={i + 1 === currentPage ? 'active' : ''} - onClick={() => clickOnKnowledgeBase(`click-pagination-${i + 1}`)} + data-click-event={`click-pagination-${i + 1}`} > {i + 1} diff --git a/apps/cow-fi/pages/learn/index.tsx b/apps/cow-fi/pages/learn/index.tsx index bff645236b..4d38f8b300 100644 --- a/apps/cow-fi/pages/learn/index.tsx +++ b/apps/cow-fi/pages/learn/index.tsx @@ -38,7 +38,6 @@ import { TopicTitle, } from '@/styles/styled' -import { clickOnKnowledgeBase } from 'modules/analytics' import LazySVG from '@/components/LazySVG' import { CategoryLinks } from '@/components/CategoryLinks' @@ -187,7 +186,7 @@ export default function Page({ siteConfigData, categories, articles, featuredArt     {featuredArticles.map(({ title, description, cover, link }, index) => ( - clickOnKnowledgeBase(`click-article-${title}`)}> + {cover && } @@ -210,7 +209,7 @@ export default function Page({ siteConfigData, categories, articles, featuredArt bgColor={bgColor} textColor={textColor} href={link} - onClick={() => clickOnKnowledgeBase(`click-topic-${name}`)} + data-click-event={`click-topic-${name}`} > {imageUrl ? ( @@ -248,7 +247,7 @@ export default function Page({ siteConfigData, categories, articles, featuredArt href={`${podcast.link}?utm_source=cow.fi&utm_medium=web&utm_content=podcast-${podcast.title}`} rel="noopener noreferrer nofollow" target="_blank" - onClick={() => clickOnKnowledgeBase(`click-podcast-${podcast.title}`)} + data-click-event={`click-podcast-${podcast.title}`} > {podcast.title} β†’ @@ -264,7 +263,7 @@ export default function Page({ siteConfigData, categories, articles, featuredArt href={`${space.link}?utm_source=cow.fi&utm_medium=web&utm_content=space-${space.title}`} rel="noopener noreferrer nofollow" target="_blank" - onClick={() => clickOnKnowledgeBase(`click-space-${space.title}`)} + data-click-event={`click-space-${space.title}`} > {space.title} β†’ @@ -285,7 +284,7 @@ export default function Page({ siteConfigData, categories, articles, featuredArt href={`${link}?utm_source=cow.fi&utm_medium=web&utm_content=media-${title}`} target={linkExternal ? '_blank' : '_self'} rel={linkExternal ? 'noopener' : ''} - onClick={() => clickOnKnowledgeBase(`click-media-${title}`)} + data-click-event={`click-media-${title}`} > {image && } {title} @@ -308,7 +307,7 @@ export default function Page({ siteConfigData, categories, articles, featuredArt href="https://docs.cow.fi/?utm_source=cow.fi&utm_medium=web&utm_content=cta-read-docs" target="_blank" rel="noopener noreferrer" - onClick={() => clickOnKnowledgeBase('click-read-docs')} + data-click-event="click-read-docs" > Read the docs diff --git a/apps/cow-fi/pages/learn/topic/[topicSlug].tsx b/apps/cow-fi/pages/learn/topic/[topicSlug].tsx index 03ce681f8e..c070815d30 100644 --- a/apps/cow-fi/pages/learn/topic/[topicSlug].tsx +++ b/apps/cow-fi/pages/learn/topic/[topicSlug].tsx @@ -17,7 +17,6 @@ import { LinkColumn, LinkItem, } from '@/styles/styled' -import { clickOnKnowledgeBase } from 'modules/analytics' import { CmsImage } from '@cowprotocol/ui' import { CategoryLinks } from '@/components/CategoryLinks' const Wrapper = styled.div` @@ -111,14 +110,14 @@ export default function TopicPage({ category, articles, allCategories }: TopicPa - clickOnKnowledgeBase('click-breadcrumbs-home')}> + Home - clickOnKnowledgeBase('click-breadcrumbs-knowledgebase')}> + Knowledge Base - clickOnKnowledgeBase('click-breadcrumbs-topics')}> - Topic + + Topics {name} @@ -148,7 +147,7 @@ export default function TopicPage({ category, articles, allCategories }: TopicPa clickOnKnowledgeBase(`click-article-${article.attributes.title}`)} + data-click-event={`click-article-${article.attributes.title}`} > {article.attributes.title} β†’ diff --git a/apps/cow-fi/pages/learn/topics.tsx b/apps/cow-fi/pages/learn/topics.tsx index 8d6ff9a1a9..bbd4409363 100644 --- a/apps/cow-fi/pages/learn/topics.tsx +++ b/apps/cow-fi/pages/learn/topics.tsx @@ -22,7 +22,6 @@ import { } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnKnowledgeBase } from 'modules/analytics' import { CmsImage } from '@cowprotocol/ui' interface PageProps { @@ -96,7 +95,7 @@ export default function Page({ siteConfigData, categories, articles }: PageProps bgColor={bgColor} textColor={textColor} href={link} - onClick={() => clickOnKnowledgeBase(`click-topic-${name}`)} + data-click-event={`click-topic-${name.toLowerCase().replace(/\s/g, '-')}`} > {imageUrl ? ( diff --git a/apps/cow-fi/pages/legal/cowswap-cookie-policy.tsx b/apps/cow-fi/pages/legal/cowswap-cookie-policy.tsx index ed9ec04ac7..c8ed18f9a9 100644 --- a/apps/cow-fi/pages/legal/cowswap-cookie-policy.tsx +++ b/apps/cow-fi/pages/legal/cowswap-cookie-policy.tsx @@ -16,7 +16,6 @@ import { } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnLegal } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -42,10 +41,10 @@ export default function Page({ siteConfigData }: PageProps) { - clickOnLegal('click-legal-breadcrumbs')}> + Home - clickOnLegal('click-legal-breadcrumbs')}> + Legal {title} diff --git a/apps/cow-fi/pages/legal/cowswap-privacy-policy.tsx b/apps/cow-fi/pages/legal/cowswap-privacy-policy.tsx index b9c7aece6c..ddc49e3061 100644 --- a/apps/cow-fi/pages/legal/cowswap-privacy-policy.tsx +++ b/apps/cow-fi/pages/legal/cowswap-privacy-policy.tsx @@ -9,7 +9,6 @@ import { Link } from '@/components/Link' import { ContainerCard, ArticleContent, Breadcrumbs, ArticleMainTitle, BodyContent } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnLegal } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -35,10 +34,10 @@ export default function Page({ siteConfigData }: PageProps) { - clickOnLegal('click-legal-breadcrumbs')}> + Home - clickOnLegal('click-legal-breadcrumbs')}> + Legal {title} diff --git a/apps/cow-fi/pages/legal/cowswap-terms.tsx b/apps/cow-fi/pages/legal/cowswap-terms.tsx index 22cf8ededc..4a5d2f2f8c 100644 --- a/apps/cow-fi/pages/legal/cowswap-terms.tsx +++ b/apps/cow-fi/pages/legal/cowswap-terms.tsx @@ -9,7 +9,6 @@ import { Link } from '@/components/Link' import { ContainerCard, ArticleContent, Breadcrumbs, ArticleMainTitle, BodyContent } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnLegal } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -39,10 +38,10 @@ export default function Page({ siteConfigData }: PageProps) { - clickOnLegal('click-legal-breadcrumbs')}> + Home - clickOnLegal('click-legal-breadcrumbs')}> + Legal {title} diff --git a/apps/cow-fi/pages/legal/index.tsx b/apps/cow-fi/pages/legal/index.tsx index fc4d3a5788..1c2912cad1 100644 --- a/apps/cow-fi/pages/legal/index.tsx +++ b/apps/cow-fi/pages/legal/index.tsx @@ -9,7 +9,6 @@ import { Link } from '@/components/Link' import { ContainerCard, ArticleContent, Breadcrumbs, ArticleMainTitle, BodyContent } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnLegal } from 'modules/analytics' const LEGAL_LINKS = [ { @@ -54,7 +53,7 @@ export default function Page({ siteConfigData }: PageProps) { - clickOnLegal('click-legal-breadcrumbs')}> + Home @@ -71,7 +70,7 @@ export default function Page({ siteConfigData }: PageProps) {
      {LEGAL_LINKS.map((link, index) => (
    • - clickOnLegal(`click-${link.title}`)}> + {link.title}
      • diff --git a/apps/cow-fi/pages/legal/widget-terms.tsx b/apps/cow-fi/pages/legal/widget-terms.tsx index a03235cb24..3ef1ce77a3 100644 --- a/apps/cow-fi/pages/legal/widget-terms.tsx +++ b/apps/cow-fi/pages/legal/widget-terms.tsx @@ -9,7 +9,6 @@ import { Link } from '@/components/Link' import { ContainerCard, ArticleContent, Breadcrumbs, ArticleMainTitle, BodyContent } from '@/styles/styled' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnLegal } from 'modules/analytics' interface PageProps { siteConfigData: typeof CONFIG @@ -39,10 +38,10 @@ export default function Page({ siteConfigData }: PageProps) { - clickOnLegal('click-legal-breadcrumbs')}> + Home - clickOnLegal('click-legal-breadcrumbs')}> + Legal {title} @@ -184,13 +183,11 @@ export default function Page({ siteConfigData }: PageProps) {
    • the Widget, the Interface, the Protocol or its infrastructure;
    • Server(s) hosting the Widget, the Interface, the Protocol or its infrastructure;
    • - Any computer or database connected to the Widget, the Interface, the Protocol or its - infrastructure. + Any computer or database connected to the Widget, the Interface, the Protocol or its infrastructure.

    - You are prohibited from attacking the Widget, the Interface, the Protocol or its infrastructure - through: + You are prohibited from attacking the Widget, the Interface, the Protocol or its infrastructure through:

    • Denial-of-service attacks;
      • diff --git a/apps/cow-fi/pages/mev-blocker.tsx b/apps/cow-fi/pages/mev-blocker.tsx index 9438897751..479a679756 100644 --- a/apps/cow-fi/pages/mev-blocker.tsx +++ b/apps/cow-fi/pages/mev-blocker.tsx @@ -7,6 +7,7 @@ import Layout from '@/components/Layout' import FAQ from '@/components/FAQ' import { AddRpcButton } from '@/components/AddRpcButton' import { Link, LinkType } from '@/components/Link' +import { CopyToClipboard } from '@/components/CopyToClipboard' import useWebShare from '../hooks/useWebShare' @@ -56,7 +57,6 @@ import LazySVG from '@/components/LazySVG' import { FAQ_DATA, TRUSTED_BY_CONTENT, TESTIMONIAL_LIST, MEV_BLOCKER_LIST } from '@/data/mev-blocker/const' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnMevBlocker } from 'modules/analytics' // Configure chains and providers const { chains, publicClient } = configureChains([mainnet], [publicProvider()]) @@ -122,7 +122,7 @@ export default function Page() { bgColor={'#EC4612'} color={'#FEE7CF'} href="#rpc" - onClick={() => clickOnMevBlocker('click-get-protected-heroSection')} + data-click-event="click-get-protected-heroSection" > Get protected @@ -155,7 +155,7 @@ export default function Page() { external linkType={LinkType.SectionTitleButton} utmContent="mev-blocker-metrics-link" - onClick={() => clickOnMevBlocker('click-metrics-dune')} + data-click-event="click-metrics-dune" > View all metrics on DUNE ↗ @@ -174,7 +174,7 @@ export default function Page() { href="https://dune.com/queries/2259793/3703605" external utmContent="mev-blocker-dune-link" - onClick={() => clickOnMevBlocker('click-dune-link')} + data-click-event="click-dune-link" > $1.38 billion {' '} @@ -205,7 +205,7 @@ export default function Page() { href="https://www.mevscanner.com/" external utmContent="mev-blocker-mev-scanner-link" - onClick={() => clickOnMevBlocker('click-mev-scanner-link')} + data-click-event="click-mev-scanner-link" > Use MEV Scanner {' '} @@ -249,33 +249,45 @@ export default function Page() { - Network name + Network Name: - MEV Blocker + + MEV Blocker + - New RPC URL + RPC URL: - https://rpc.mevblocker.io + + https://rpc.mevblocker.io + + Chain ID - 1 + + 1 + Currency symbol - ETH + + ETH + Block Explorer URL - https://etherscan.io + + https://etherscan.io + + @@ -356,7 +368,7 @@ export default function Page() { href="https://docs.cow.fi/mevblocker" external utmContent="mev-blocker-docs-link" - onClick={() => clickOnMevBlocker('click-mev-blocker-docs-link')} + data-click-event="click-mev-blocker-docs-link" > read the MEV Blocker docs @@ -438,7 +450,7 @@ export default function Page() { external linkType={LinkType.SectionTitleButton} utmContent="mev-blocker-learn-more" - onClick={() => clickOnMevBlocker('click-mev-blocker-learn-more')} + data-click-event="click-mev-blocker-learn-more" > Learn more @@ -465,7 +477,7 @@ export default function Page() { href={item.href} rel={'noopener noreferrer nofollow'} target="_blank" - onClick={() => clickOnMevBlocker(`click-trusted-by-${item.href}`)} + data-click-event={`click-trusted-by-${item.href}`} > Share MEV Blocker diff --git a/apps/cow-fi/pages/widget.tsx b/apps/cow-fi/pages/widget.tsx index a8280468ec..b7e33fc9d7 100644 --- a/apps/cow-fi/pages/widget.tsx +++ b/apps/cow-fi/pages/widget.tsx @@ -37,7 +37,6 @@ import { DAO_CONTENT as CONTENT } from '@/data/widget/const' import LazySVG from '@/components/LazySVG' import { CONFIG, DATA_CACHE_TIME_SECONDS } from '@/const/meta' -import { clickOnWidget } from 'modules/analytics' const FEATURE_ITEMS = [ 'Live styling configurator', @@ -86,10 +85,9 @@ export default function Page() { utmContent="widget-page-configure-widget-cta-hero" external linkType={LinkType.HeroButton} - onClick={() => clickOnWidget('click-config-widget')} + data-click-event="click-config-widget" > - {' '} - Configure widget{' '} + Configure widget clickOnWidget('click-read-docs')} + data-click-event="click-read-docs" > - {' '} Read docs @@ -308,10 +305,9 @@ export default function Page() { utmContent="widget-page-configure-widget-cta-hero" external linkType={LinkType.HeroButton} - onClick={() => clickOnWidget('click-config-widget')} + data-click-event="click-config-widget" > - {' '} - Configure widget{' '} + Configure widget clickOnWidget('click-read-docs')} + data-click-event="click-read-docs" > - {' '} Read docs diff --git a/apps/cow-fi/tsconfig.json b/apps/cow-fi/tsconfig.json index 91c8dd5572..e4e7b70e51 100644 --- a/apps/cow-fi/tsconfig.json +++ b/apps/cow-fi/tsconfig.json @@ -9,6 +9,7 @@ "@/styles/*": ["styles/*"], "@/data/*": ["data/*"], "@/util/*": ["util/*"], + "@/lib/*": ["lib/*"], "@cowprotocol/widget-react": ["../../libs/widget-react/src/index.ts"], "@cowprotocol/events": ["../../libs/events/src/index.ts"], "@cowprotocol/widget-lib": ["../../libs/widget-lib/src/index.ts"], diff --git a/libs/analytics/src/googleAnalytics/initGoogleAnalytics.ts b/libs/analytics/src/googleAnalytics/initGoogleAnalytics.ts index cd66590f46..d722616f1b 100644 --- a/libs/analytics/src/googleAnalytics/initGoogleAnalytics.ts +++ b/libs/analytics/src/googleAnalytics/initGoogleAnalytics.ts @@ -4,7 +4,7 @@ import { CowAnalytics } from '../CowAnalytics' export const GOOGLE_ANALYTICS_CLIENT_ID_STORAGE_KEY = 'ga_client_id' -export function initCowAnalyticsGoogle(loadGTM: boolean = false): CowAnalytics { +export function initCowAnalyticsGoogle(): CowAnalytics { // Load stored client id let storedClientId: string | null = null if (typeof window !== 'undefined') { @@ -26,11 +26,6 @@ export function initCowAnalyticsGoogle(loadGTM: boolean = false): CowAnalytics { }, }) - // Add GTM loading if specified - if (loadGTM && typeof window !== 'undefined') { - loadGoogleTagManager() - } - // Add logging to sendEvent const originalSendEvent = cowAnalytics.sendEvent.bind(cowAnalytics) cowAnalytics.sendEvent = (...args) => { @@ -48,25 +43,3 @@ export function initCowAnalyticsGoogle(loadGTM: boolean = false): CowAnalytics { return cowAnalytics } - -function loadGoogleTagManager() { - // Add script to head - const script = document.createElement('script') - script.innerHTML = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': - new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], - j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= - 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); - })(window,document,'script','dataLayer','GTM-TBX4BV5M');` - document.head.insertBefore(script, document.head.firstChild) - - // Add noscript iframe to body - const noscript = document.createElement('noscript') - const iframe = document.createElement('iframe') - iframe.src = 'https://www.googletagmanager.com/ns.html?id=GTM-TBX4BV5M' - iframe.height = '0' - iframe.width = '0' - iframe.style.display = 'none' - iframe.style.visibility = 'hidden' - noscript.appendChild(iframe) - document.body.insertBefore(noscript, document.body.firstChild) -} diff --git a/libs/ui/src/analytics/events.ts b/libs/ui/src/analytics/events.ts index 507f525d13..47a09707fb 100644 --- a/libs/ui/src/analytics/events.ts +++ b/libs/ui/src/analytics/events.ts @@ -1,7 +1,6 @@ -import { CowAnalytics } from '@cowprotocol/analytics'; +import { CowAnalytics } from '@cowprotocol/analytics' import { detectExplorer } from '@cowprotocol/common-utils' - /** * Common UI shared events */ @@ -21,13 +20,6 @@ export function externalLinkAnalytics(cowAnalytics: CowAnalytics, href: string) }) } -export function clickOnFooter(cowAnalytics: CowAnalytics, name: string) { - cowAnalytics.sendEvent({ - category: Category.FOOTER, - action: name, - }) -} - export function serviceWorkerLoad(cowAnalytics: CowAnalytics, installed: boolean, hit: boolean) { const action = installed ? (hit ? 'Cache hit' : 'Cache miss') : 'Not installed' diff --git a/libs/ui/src/containers/Footer/index.tsx b/libs/ui/src/containers/Footer/index.tsx index b3b11438a1..68da6a7d61 100644 --- a/libs/ui/src/containers/Footer/index.tsx +++ b/libs/ui/src/containers/Footer/index.tsx @@ -1,6 +1,5 @@ import { useState, ReactNode, useEffect, useRef } from 'react' -import { CowAnalytics, useCowAnalytics } from '@cowprotocol/analytics' import IMG_ICON_ARROW_RIGHT_CIRCULAR from '@cowprotocol/assets/images/arrow-right-circular.svg' import IMG_ICON_SOCIAL_DISCORD from '@cowprotocol/assets/images/icon-social-discord.svg' import IMG_ICON_SOCIAL_FORUM from '@cowprotocol/assets/images/icon-social-forum.svg' @@ -32,7 +31,6 @@ import { ToggleFooterButton, } from './styled' -import { clickOnFooter } from '../../analytics/events' import { Color } from '../../consts' import { MenuItem } from '../../pure/MenuBar' import { ProductLogo, ProductVariant } from '../../pure/ProductLogo' @@ -218,10 +216,9 @@ interface FooterLinkProps { utmSource?: string utmContent?: string rootDomain?: string - cowAnalytics: CowAnalytics } -const FooterLink = ({ href, external, label, utmSource, utmContent, rootDomain, cowAnalytics }: FooterLinkProps) => { +const FooterLink = ({ href, external, label, utmSource, utmContent, rootDomain }: FooterLinkProps) => { const finalRootDomain = rootDomain || (typeof window !== 'undefined' ? window.location.host : '') const finalHref = external @@ -235,12 +232,7 @@ const FooterLink = ({ href, external, label, utmSource, utmContent, rootDomain, })() return ( - clickOnFooter(cowAnalytics, `click-${utmContent || label?.toLowerCase().replace(/\s+/g, '-')}`)} - > + {label} ) @@ -289,7 +281,6 @@ export const Footer = ({ maxWidth, host, }: FooterProps) => { - const cowAnalytics = useCowAnalytics() const [isFooterExpanded, setIsFooterExpanded] = useState(expanded) const footerRef = useRef(null) const hasMounted = useRef(false) @@ -354,7 +345,6 @@ export const Footer = ({ utmSource={child.utmSource} utmContent={child.utmContent} rootDomain={rootDomain} - cowAnalytics={cowAnalytics} /> ))} diff --git a/libs/ui/src/pure/MenuBar/index.tsx b/libs/ui/src/pure/MenuBar/index.tsx index faa781c469..8de4789d31 100644 --- a/libs/ui/src/pure/MenuBar/index.tsx +++ b/libs/ui/src/pure/MenuBar/index.tsx @@ -100,6 +100,7 @@ export interface MenuItem { hoverColor?: string overrideHoverColor?: string onClick?: (event: React.MouseEvent) => void + 'data-click-event'?: string hasDivider?: boolean utmContent?: string utmSource?: string @@ -123,6 +124,7 @@ interface DropdownMenuItem { color?: string hoverColor?: string onClick?: (event: React.MouseEvent) => void + 'data-click-event'?: string hasDivider?: boolean utmContent?: string utmSource?: string @@ -842,6 +844,7 @@ export const MenuBar = (props: MenuBarProps) => { hoverColor={item.hoverColor} mobileMode={isMedium} as={item.isButton ? 'button' : 'div'} + {...(item['data-click-event'] && { 'data-click-event': item['data-click-event'] })} > @@ -908,6 +911,7 @@ export const MenuBar = (props: MenuBarProps) => { hoverBgColor={item.hoverBgColor} hoverColor={item.hoverColor} as={item.isButton ? 'button' : 'div'} + {...(item['data-click-event'] && { 'data-click-event': item['data-click-event'] })} >