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