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

* add events - no names yet

* lint fix

* events

* link

* more into card

* fix

* switch

package.json

@@ -138,7 +138,7 @@
     "@types/react-relay": "^13.0.2",
     "@types/react-window-infinite-loader": "^1.0.6",
     "@uniswap/analytics": "1.2.0",
-    "@uniswap/analytics-events": "1.2.0",
+    "@uniswap/analytics-events": "1.3.1",
     "@uniswap/conedison": "^1.1.0",
     "@uniswap/governance": "^1.0.2",
     "@uniswap/liquidity-staker": "^1.0.2",

src/pages/About/Card.tsx

+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,15 +71,18 @@ const Card = ({
   to,
   external,
   backgroundImgSrc,
+  elementName,
 }: {
   title: string
   description: string
   to: string
   external?: boolean
   backgroundImgSrc?: string
+  elementName: string
 }) => {
   const isDarkMode = useIsDarkMode()
   return (
+    <TraceEvent events={[BrowserEvent.onClick]} name={EventName.ELEMENT_CLICKED} element={elementName}>
       <StyledCard
         as={external ? 'a' : Link}
         to={external ? undefined : to}
@@ -90,6 +95,7 @@ const Card = ({
         <CardTitle>{title}</CardTitle>
         <CardDescription>{description}</CardDescription>
       </StyledCard>
+    </TraceEvent>
   )
 }
 

src/pages/About/constants.ts

+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

-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>
+                <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>
+              <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

-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>
+        <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>
+            <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

@@ -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"