Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate to GTM-based Analytics Implementation #5413

Open
wants to merge 4 commits into
base: GTM-migration
Choose a base branch
from
Open

Migrate to GTM-based Analytics Implementation #5413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
34a60b7
feat(analytics): enhance GTM event tracking with GA4-compatible format
fairlighteth Feb 7, 2025
da1e673
refactor: optimize GTM analytics implementation with singleton and im…
fairlighteth Feb 7, 2025
b43b0ff
refactor: update SectionTitleIcon component with prop naming convention
fairlighteth Feb 7, 2025
36a3a1c
Merge branch 'GTM-migration' into GTM-migration-eventsfix
fairlighteth Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions apps/cow-fi/app/(main)/cow-amm/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral10}>
<ContainerCardSection>
<SectionTitleWrapper color={Color.neutral100} maxWidth={1100} gap={56}>
<SectionTitleIcon size={98}>
<SectionTitleIcon $size={98}>
<LazySVG src={IMG_ICON_CROWN_COW} />
</SectionTitleIcon>
<SectionTitleText>AMMs don&apos;t want you to know about LVR</SectionTitleText>
Expand Down Expand Up @@ -160,7 +160,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 0" marginMobile="0 auto" maxWidth={1170} color={Color.neutral10}>
<SectionTitleIcon size={128}>
<SectionTitleIcon $size={128}>
<LazySVG src={IMG_ICON_BULB_COW} />
</SectionTitleIcon>
<SectionTitleText textAlign="center">Finally, an AMM designed with LPs in mind</SectionTitleText>
Expand Down Expand Up @@ -205,7 +205,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral100}>
<ContainerCardSection>
<SectionTitleWrapper color={Color.neutral10} maxWidth={1100} gap={56}>
<SectionTitleIcon size={98}>
<SectionTitleIcon $size={98}>
<LazySVG src={IMG_ICON_CROWN_COW} />
</SectionTitleIcon>
<SectionTitleText>
Expand Down Expand Up @@ -251,7 +251,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper color={Color.neutral10} maxWidth={1100} gap={56}>
<SectionTitleIcon size={128}>
<SectionTitleIcon $size={128}>
<LazySVG src={IMG_ICON_BULB_COW} />
</SectionTitleIcon>
<SectionTitleText>CoW AMM benefits LPs of all types</SectionTitleText>
Expand Down Expand Up @@ -325,7 +325,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral10} color={Color.neutral98}>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 56px">
<SectionTitleIcon size={82}>
<SectionTitleIcon $size={82}>
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly />
</SectionTitleIcon>
<SectionTitleText>Trust the experts</SectionTitleText>
Expand Down Expand Up @@ -356,7 +356,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral90} color={Color.neutral10} touchFooter>
<ContainerCardSection padding={'0 0 100px'}>
<SectionTitleWrapper>
<SectionTitleIcon size={62}>
<SectionTitleIcon $size={62}>
<LazySVG src={IMG_ICON_FAQ} />
</SectionTitleIcon>
<SectionTitleText>FAQs</SectionTitleText>
Expand Down
14 changes: 7 additions & 7 deletions apps/cow-fi/app/(main)/cow-protocol/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral98}>
<ContainerCardSection>
<SectionTitleWrapper color={Color.neutral0} maxWidth={700} gap={56}>
<SectionTitleIcon size={82}>
<SectionTitleIcon $size={82}>
<LazySVG src={IMG_ICON_CROWN_COW} />
</SectionTitleIcon>
<SectionTitleText>The leading intents-based DEX aggregation protocol</SectionTitleText>
Expand All @@ -144,7 +144,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper>
<SectionTitleIcon size={132}>
<SectionTitleIcon $size={132}>
<LazySVG src={IMG_COW_LENS} />
</SectionTitleIcon>
<SectionTitleText>How it works</SectionTitleText>
Expand Down Expand Up @@ -342,7 +342,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={878} color={Color.neutral10}>
<SectionTitleIcon size={128}>
<SectionTitleIcon $size={128}>
<LazySVG src={IMG_ICON_BULB_COW} />
</SectionTitleIcon>
<SectionTitleText textAlign="center">Powering innovation across DeFi</SectionTitleText>
Expand Down Expand Up @@ -398,7 +398,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral10} color={Color.neutral98}>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 0">
<SectionTitleIcon multiple size={60}>
<SectionTitleIcon $multiple $size={60}>
<LazySVG src={IMG_ICON_OWL} />
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly height={60} />
<LazySVG src={IMG_ICON_GHOST} />
Expand Down Expand Up @@ -488,7 +488,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper color={Color.neutral10} maxWidth={1100}>
<SectionTitleIcon size={78}>
<SectionTitleIcon $size={78}>
<LazySVG src={IMG_ICON_BUILD_WITH_COW} />
</SectionTitleIcon>
<SectionTitleText>Build with CoW Protocol</SectionTitleText>
Expand Down Expand Up @@ -538,7 +538,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={1000}>
<SectionTitleIcon size={100}>
<SectionTitleIcon $size={100}>
<LazySVG src={IMG_ICON_SECURE} />
</SectionTitleIcon>
<SectionTitleText textAlign="center">Want to build a solver?</SectionTitleText>
Expand Down Expand Up @@ -576,7 +576,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral90} color={Color.neutral10} touchFooter>
<ContainerCardSection>
<SectionTitleWrapper>
<SectionTitleIcon size={62}>
<SectionTitleIcon $size={62}>
<LazySVG src={IMG_ICON_FAQ} />
</SectionTitleIcon>
<SectionTitleText>FAQs</SectionTitleText>
Expand Down
10 changes: 5 additions & 5 deletions apps/cow-fi/app/(main)/cow-swap/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral100}>
<ContainerCardSection gap={90}>
<SectionTitleWrapper color={Color.neutral10} maxWidth={1100} gap={56}>
<SectionTitleIcon multiple size={82}>
<SectionTitleIcon $multiple $size={82}>
<LazySVG src={IMG_ICON_UNICORN} />
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly />
<LazySVG src={IMG_ICON_UNICORN} className="image-reverse" />
Expand Down Expand Up @@ -179,7 +179,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={800}>
<SectionTitleIcon size={126}>
<SectionTitleIcon $size={126}>
<LazySVG src={ICON_BULB} />
</SectionTitleIcon>
<SectionTitleText>CoW Swap is the first user interface built on top of CoW Protocol</SectionTitleText>
Expand Down Expand Up @@ -208,7 +208,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral10} color={Color.neutral98}>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 0" maxWidth={900}>
<SectionTitleIcon size={140}>
<SectionTitleIcon $size={140}>
<LazySVG src={IMG_ICON_FLOWER_COW} />
</SectionTitleIcon>
<SectionTitleText>S-moooo-th trading</SectionTitleText>
Expand Down Expand Up @@ -284,7 +284,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 0" maxWidth={1300}>
<SectionTitleIcon size={82}>
<SectionTitleIcon $size={82}>
<ProductLogo variant={ProductVariant.CowProtocol} theme="light" logoIconOnly />
</SectionTitleIcon>
<SectionTitleText textAlign="center">The DEX of choice for crypto whales and pros</SectionTitleText>
Expand Down Expand Up @@ -383,7 +383,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'} color={Color.neutral10}>
<ContainerCardSection>
<SectionTitleWrapper>
<SectionTitleIcon size={62}>
<SectionTitleIcon $size={62}>
<LazySVG src={IMG_ICON_FAQ} />
</SectionTitleIcon>
<SectionTitleText>FAQs</SectionTitleText>
Expand Down
6 changes: 3 additions & 3 deletions apps/cow-fi/app/(main)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'}>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={900}>
<SectionTitleIcon size={126}>
<SectionTitleIcon $size={126}>
<LazySVG src={IMG_ICON_BULB_COW} />
</SectionTitleIcon>
<SectionTitleText>Innovation in action</SectionTitleText>
Expand All @@ -85,7 +85,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral10} color={Color.neutral98}>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 0" maxWidth={900}>
<SectionTitleIcon size={90}>
<SectionTitleIcon $size={90}>
<LazySVG src={IMG_ICON_GOVERNANCE} />
</SectionTitleIcon>
<SectionTitleText textAlign="center">Governance</SectionTitleText>
Expand Down Expand Up @@ -127,7 +127,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral90} color={Color.neutral10} touchFooter>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={900}>
<SectionTitleIcon size={90}>
<SectionTitleIcon $size={90}>
<LazySVG src={IMG_ICON_GRANTS_CARTON} />
</SectionTitleIcon>
<SectionTitleText textAlign="center">Grants</SectionTitleText>
Expand Down
8 changes: 4 additions & 4 deletions apps/cow-fi/app/(main)/widget/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral10} color={Color.neutral100}>
<ContainerCardSection>
<SectionTitleWrapper>
<SectionTitleIcon size={100}>
<SectionTitleIcon $size={100}>
<ProductLogo variant={ProductVariant.CowProtocol} theme="light" logoIconOnly />
</SectionTitleIcon>
<SectionTitleText>Integrate now</SectionTitleText>
Expand Down Expand Up @@ -169,7 +169,7 @@ export default function Page() {
<ContainerCard bgColor={'transparent'} color={Color.neutral10}>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={900}>
<SectionTitleIcon size={60}>
<SectionTitleIcon $size={60}>
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly />
</SectionTitleIcon>
<SectionTitleText fontSize={62}>Every Bell, Whistle, and Moo</SectionTitleText>
Expand Down Expand Up @@ -225,7 +225,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral100} color={Color.neutral10}>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={900}>
<SectionTitleIcon size={60}>
<SectionTitleIcon $size={60}>
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly />
</SectionTitleIcon>
<SectionTitleText fontSize={62}>Everything You'd Want in a Widget</SectionTitleText>
Expand Down Expand Up @@ -258,7 +258,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral10} color={Color.neutral98}>
<ContainerCardSection>
<SectionTitleWrapper>
<SectionTitleIcon multiple>
<SectionTitleIcon $multiple>
<LazySVG src={IMG_ICON_OWL} />
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly height={60} />
<LazySVG src={IMG_ICON_GHOST} />
Expand Down
6 changes: 3 additions & 3 deletions apps/cow-fi/app/(mev-blocker)/mev-blocker/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export default function Page() {
<ContainerCard bgColor={Color.neutral100}>
<ContainerCardSection gap={60}>
<SectionTitleWrapper color={Color.neutral10} maxWidth={1300} gap={56}>
<SectionTitleIcon multiple size={82}>
<SectionTitleIcon $multiple $size={82}>
<LazySVG src={IMAGE_ICON_MEVBLOCKER_PROTECT} />
</SectionTitleIcon>
<SectionTitleText maxWidth={500}>Broad spectrum MEV defense</SectionTitleText>
Expand Down Expand Up @@ -221,7 +221,7 @@ export default function Page() {
<ContainerCard bgColor="transparent" color={Color.neutral10} id="rpc">
<ContainerCardSection>
<SectionTitleWrapper maxWidth={850} gap={56} margin="24px auto">
<SectionTitleIcon multiple size={82}>
<SectionTitleIcon $multiple $size={82}>
<LazySVG src={IMAGE_ICON_MEVBLOCKER_PROTECT2} />
</SectionTitleIcon>
<SectionTitleText>Get Protected</SectionTitleText>
Expand Down Expand Up @@ -457,7 +457,7 @@ export default function Page() {
<ContainerCard bgColor="transparent">
<ContainerCardSection>
<SectionTitleWrapper>
<SectionTitleIcon size={90}>
<SectionTitleIcon $size={90}>
<LazySVG src={IMAGE_ICON_MEVBLOCKER_TRUST} />
</SectionTitleIcon>
<SectionTitleText>Trusted by the best</SectionTitleText>
Expand Down
2 changes: 1 addition & 1 deletion apps/cow-fi/components/CareersPageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export function CareersPageContent({
<ContainerCard bgColor={Color.neutral90} color={Color.neutral10} touchFooter>
<ContainerCardSection>
<SectionTitleWrapper maxWidth={900} margin="0 auto 56px" marginMobile="0 auto 56px">
<SectionTitleIcon size={60}>
<SectionTitleIcon $size={60}>
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly />
</SectionTitleIcon>
<SectionTitleText fontSize={62}>Want to build the future of decentralized trading?</SectionTitleText>
Expand Down
6 changes: 3 additions & 3 deletions apps/cow-fi/components/DaosPageComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export function DaosPageComponent() {
<ContainerCard bgColor={Color.neutral10}>
<ContainerCardSection>
<SectionTitleWrapper color={Color.neutral100} maxWidth={1100} gap={56}>
<SectionTitleIcon size={98}>
<SectionTitleIcon $size={98}>
<LazySVG src={IMG_ICON_CROWN_COW} />
</SectionTitleIcon>
<SectionTitleText>Expert trading for expert DAOs</SectionTitleText>
Expand Down Expand Up @@ -134,7 +134,7 @@ export function DaosPageComponent() {
<ContainerCard bgColor={'transparent'} color={Color.neutral10}>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 0" maxWidth={800}>
<SectionTitleIcon size={60}>
<SectionTitleIcon $size={60}>
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly />
</SectionTitleIcon>
<SectionTitleText>Advanced order types</SectionTitleText>
Expand Down Expand Up @@ -274,7 +274,7 @@ export function DaosPageComponent() {
<ContainerCard bgColor={Color.neutral10} color={Color.neutral98} touchFooter>
<ContainerCardSection>
<SectionTitleWrapper padding="150px 0 0">
<SectionTitleIcon multiple>
<SectionTitleIcon $multiple>
<LazySVG src={IMG_ICON_OWL} />
<ProductLogo variant={ProductVariant.CowProtocol} theme="dark" logoIconOnly height={60} />
<LazySVG src={IMG_ICON_GHOST} />
Expand Down
8 changes: 4 additions & 4 deletions apps/cow-fi/styles/styled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -834,8 +834,8 @@ export const SectionTitleDescription = styled.p<{
}
`

export const SectionTitleIcon = styled.div<{ size?: number; multiple?: boolean }>`
--size: ${({ size }) => (size ? `${size}px` : '82px')};
export const SectionTitleIcon = styled.div<{ $size?: number; $multiple?: boolean }>`
--size: ${({ $size }) => ($size ? `${$size}px` : '82px')};
width: 100%;
height: var(--size);
object-fit: contain;
Expand All @@ -847,12 +847,12 @@ export const SectionTitleIcon = styled.div<{ size?: number; multiple?: boolean }

> span {
height: var(--size);
width: ${({ multiple }) => (multiple ? 'auto' : '100%')};
width: ${({ $multiple = false }) => ($multiple ? 'auto' : '100%')};
color: inherit;
}

svg {
width: ${({ multiple }) => (multiple ? 'auto' : '100%')};
width: ${({ $multiple = false }) => ($multiple ? 'auto' : '100%')};
height: 100%;
max-height: var(--size);
fill: currentColor;
Expand Down
2 changes: 1 addition & 1 deletion apps/cowswap-frontend/src/common/analytics/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export enum CowSwapAnalyticsCategory {
HOOKS = 'Hooks',
CURRENCY_SELECT = 'Currency Select',
RECIPIENT_ADDRESS = 'Recipient address',
ORDER_SLIPAGE_TOLERANCE = 'Order Slippage Tolerance',
ORDER_SLIPPAGE_TOLERANCE = 'Order Slippage Tolerance',
ORDER_EXPIRATION_TIME = 'Order Expiration Time',
WRAP_NATIVE_TOKEN = 'Wrapped Native Token',
CLAIM_COW_FOR_LOCKED_GNO = 'Claim COW for Locked GNO',
Expand Down
Loading
Loading