Skip to content

I
interface
Commit 35613cc9 authored by Vignesh Mohankumar's avatar Vignesh Mohankumar Committed by GitHub
Browse files
Options

feat: amplitude analytics for landing and about (#5606) 

* add events - no names yet

* lint fix

* events

* link

* more into card

* fix

* switch
parent b0d71f10
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 49 deletions
src/pages/About/Card.tsx
View file @ 35613cc9
import { TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, EventName } from '@uniswap/analytics-events'
import { Link } from 'react-router-dom'
import { useIsDarkMode } from 'state/user/hooks'
import styled from 'styled-components/macro'
......@@ -69,27 +71,31 @@ const Card = ({
to,
external,
backgroundImgSrc,
elementName,
}: {
title: string
description: string
to: string
external?: boolean
backgroundImgSrc?: string
elementName: string
}) => {
const isDarkMode = useIsDarkMode()
return (
<StyledCard
as={external ? 'a' : Link}
to={external ? undefined : to}
href={external ? to : undefined}
target={external ? '_blank' : undefined}
rel={external ? 'noopenener noreferrer' : undefined}
isDarkMode={isDarkMode}
backgroundImgSrc={backgroundImgSrc}
>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</StyledCard>
<TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={elementName}>
<StyledCard
as={external ? 'a' : Link}
to={external ? undefined : to}
href={external ? to : undefined}
target={external ? '_blank' : undefined}
rel={external ? 'noopenener noreferrer' : undefined}
isDarkMode={isDarkMode}
backgroundImgSrc={backgroundImgSrc}
>
<CardTitle>{title}</CardTitle>
<CardDescription>{description}</CardDescription>
</StyledCard>
</TraceEvent>
)
}
......
src/pages/About/constants.ts
View file @ 35613cc9
import { ElementName } from '@uniswap/analytics-events'
import darkNftCardImgSrc from './images/darkNftCard.png'
import darkSwapSrc from './images/darkSwap.png'
import darkSwapCardImgSrc from './images/darkSwapCard.png'
......@@ -15,6 +17,7 @@ export const CARDS = [
description: 'Buy, sell, and explore tokens on Ethereum, Polygon, Optimism, and more.',
darkBackgroundImgSrc: darkSwapCardImgSrc,
lightBackgroundImgSrc: lightSwapCardImgSrc,
elementName: ElementName.ABOUT_PAGE_SWAP_CARD,
},
{
to: '/nfts',
......@@ -22,6 +25,7 @@ export const CARDS = [
description: 'Buy and sell NFTs across marketplaces to find more listings at better prices.',
darkBackgroundImgSrc: darkNftCardImgSrc,
lightBackgroundImgSrc: lightNftCardImgSrc,
elementName: ElementName.ABOUT_PAGE_NFTS_CARD,
},
]
......
src/pages/About/index.tsx
View file @ 35613cc9
import { Trace } from '@uniswap/analytics'
import { PageName } from '@uniswap/analytics-events'
import { Trace, TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, ElementName, EventName, PageName } from '@uniswap/analytics-events'
import { ButtonOutlined } from 'components/Button'
import { useLayoutEffect, useRef, useState } from 'react'
import { BookOpen, Globe, Heart, Twitter } from 'react-feather'
......@@ -237,21 +237,33 @@ export default function About() {
<Intro>
<IntroCopy>The leading decentralized crypto trading protocol, governed by a global community</IntroCopy>
<ActionsContainer>
<InfoButton as="a" rel="noopener noreferrer" href="https://uniswap.org" target="_blank">
Learn more<WrappedExternalArrow> ↗</WrappedExternalArrow>
</InfoButton>
<InfoButton as="a" rel="noopener noreferrer" href="https://docs.uniswap.org" target="_blank">
Read docs<WrappedExternalArrow> ↗</WrappedExternalArrow>
</InfoButton>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.LEGACY_LANDING_PAGE_LINK}
>
<InfoButton as="a" rel="noopener noreferrer" href="https://uniswap.org" target="_blank">
Learn more<WrappedExternalArrow> ↗</WrappedExternalArrow>
</InfoButton>
</TraceEvent>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.DOCS_LINK}
>
<InfoButton as="a" rel="noopener noreferrer" href="https://docs.uniswap.org" target="_blank">
Read docs<WrappedExternalArrow> ↗</WrappedExternalArrow>
</InfoButton>
</TraceEvent>
</ActionsContainer>
</Intro>
</Panels>
<CardGrid>
{CARDS.map(({ darkBackgroundImgSrc, lightBackgroundImgSrc, ...card }) => (
<Card
key={card.title}
{...card}
backgroundImgSrc={isDarkMode ? darkBackgroundImgSrc : lightBackgroundImgSrc}
key={card.title}
/>
))}
</CardGrid>
......@@ -276,18 +288,42 @@ export default function About() {
</div>
<Footer>
<FooterLinks>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://support.uniswap.org">
<Globe /> Support
</FooterLink>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://twitter.com/uniswap">
<Twitter /> Twitter
</FooterLink>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://uniswap.org/blog">
<BookOpen /> Blog
</FooterLink>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://boards.greenhouse.io/uniswaplabs">
<Heart /> Careers
</FooterLink>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.SUPPORT_LINK}
>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://support.uniswap.org">
<Globe /> Support
</FooterLink>
</TraceEvent>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.TWITTER_LINK}
>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://twitter.com/uniswap">
<Twitter /> Twitter
</FooterLink>
</TraceEvent>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.BLOG_LINK}
>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://uniswap.org/blog">
<BookOpen /> Blog
</FooterLink>
</TraceEvent>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.CAREERS_LINK}
>
<FooterLink rel="noopener noreferrer" target="_blank" href="https://boards.greenhouse.io/uniswaplabs">
<Heart /> Careers
</FooterLink>
</TraceEvent>
</FooterLinks>
<Copyright>© {new Date().getFullYear()} Uniswap Labs</Copyright>
</Footer>
......
src/pages/Landing/index.tsx
View file @ 35613cc9
import { Trace } from '@uniswap/analytics'
import { PageName } from '@uniswap/analytics-events'
import { Trace, TraceEvent } from '@uniswap/analytics'
import { BrowserEvent, ElementName, EventName, PageName } from '@uniswap/analytics-events'
import { BaseButton } from 'components/Button'
import { LandingPageVariant, useLandingPageFlag } from 'featureFlags/flags/landingPage'
import Swap from 'pages/Swap'
......@@ -212,9 +212,15 @@ export default function Landing() {
return (
<Trace page={PageName.LANDING_PAGE} shouldLogImpression>
<PageWrapper>
<Link to="/swap">
<LandingSwap />
</Link>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.LANDING_PAGE_SWAP_ELEMENT}
>
<Link to="/swap">
<LandingSwap />
</Link>
</TraceEvent>
<Glow />
<Gradient isDarkMode={isDarkMode} />
<ContentWrapper isDarkMode={isDarkMode}>
......@@ -223,12 +229,24 @@ export default function Landing() {
<SubText>Buy, sell, and explore tokens and NFTs</SubText>
</SubTextContainer>
<ActionsWrapper>
<ButtonCTA as={Link} to="/swap">
<ButtonCTAText>Continue</ButtonCTAText>
</ButtonCTA>
<ButtonCTASecondary as={Link} to="/about">
<ButtonCTAText>Learn more</ButtonCTAText>
</ButtonCTASecondary>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.CONTINUE_BUTTON}
>
<ButtonCTA as={Link} to="/swap">
<ButtonCTAText>Continue</ButtonCTAText>
</ButtonCTA>
</TraceEvent>
<TraceEvent
events={[BrowserEvent.onClick]}
name={EventName.ELEMENT_CLICKED}
element={ElementName.LEARN_MORE_LINK}
>
<ButtonCTASecondary as={Link} to="/about">
<ButtonCTAText>Learn more</ButtonCTAText>
</ButtonCTASecondary>
</TraceEvent>
</ActionsWrapper>
</ContentWrapper>
</PageWrapper>
......
yarn.lock
View file @ 35613cc9
......@@ -4195,10 +4195,10 @@
"@typescript-eslint/types" "4.33.0"
eslint-visitor-keys "^2.0.0"
"@uniswap/analytics-events@1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-1.2.0.tgz#9a509cd782dcf170b3b7cf1207126ee197658cc5"
integrity sha512-CGvvG6jiGx/ez5rJqWavAV3CDlecX2ZR7oBl1mMYVSnzXv9GsoleeiZAYcETJvEt2hKhmEq0tg7xjwP0pMav9A==
"@uniswap/analytics-events@1.3.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@uniswap/analytics-events/-/analytics-events-1.3.1.tgz#e1ad912001646268ea16f64622c683ca2a63002d"
integrity sha512-EzYLBU123TpTCNPfa8cN7cI3Ap8D5Rn0771/bAtjSElZROR6YnGFNj0cjnaHwo8SIUr5Ema7JLoXbMVUyreFXQ==
"@uniswap/analytics@1.2.0":
version "1.2.0"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment