feat: send web vitals (#4366)
This commit is contained in:
parent
8e9dbe31fa
commit
104b62f4d8
@ -23,6 +23,7 @@ export enum EventName {
|
|||||||
TOKEN_SELECTOR_OPENED = 'Token Selector Opened',
|
TOKEN_SELECTOR_OPENED = 'Token Selector Opened',
|
||||||
WALLET_CONNECT_TXN_COMPLETED = 'Wallet Connect Transaction Completed',
|
WALLET_CONNECT_TXN_COMPLETED = 'Wallet Connect Transaction Completed',
|
||||||
WALLET_SELECTED = 'Wallet Selected',
|
WALLET_SELECTED = 'Wallet Selected',
|
||||||
|
WEB_VITALS = 'Web Vitals',
|
||||||
WRAP_TOKEN_TXN_SUBMITTED = 'Wrap Token Transaction Submitted',
|
WRAP_TOKEN_TXN_SUBMITTED = 'Wrap Token Transaction Submitted',
|
||||||
// alphabetize additional event names.
|
// alphabetize additional event names.
|
||||||
}
|
}
|
||||||
|
@ -13,6 +13,7 @@ import { useIsDarkMode } from 'state/user/hooks'
|
|||||||
import styled from 'styled-components/macro'
|
import styled from 'styled-components/macro'
|
||||||
import { SpinnerSVG } from 'theme/components'
|
import { SpinnerSVG } from 'theme/components'
|
||||||
import { getBrowser } from 'utils/browser'
|
import { getBrowser } from 'utils/browser'
|
||||||
|
import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
|
||||||
|
|
||||||
import { useAnalyticsReporter } from '../components/analytics'
|
import { useAnalyticsReporter } from '../components/analytics'
|
||||||
import ErrorBoundary from '../components/ErrorBoundary'
|
import ErrorBoundary from '../components/ErrorBoundary'
|
||||||
@ -120,11 +121,14 @@ export default function App() {
|
|||||||
}, [pathname])
|
}, [pathname])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// TODO(zzmp): add web vitals event properties to app loaded event.
|
|
||||||
sendAnalyticsEvent(EventName.APP_LOADED)
|
sendAnalyticsEvent(EventName.APP_LOADED)
|
||||||
user.set(CUSTOM_USER_PROPERTIES.BROWSER, getBrowser())
|
user.set(CUSTOM_USER_PROPERTIES.BROWSER, getBrowser())
|
||||||
user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_HEIGHT, window.screen.height)
|
user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_HEIGHT, window.screen.height)
|
||||||
user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_WIDTH, window.screen.width)
|
user.set(CUSTOM_USER_PROPERTIES.SCREEN_RESOLUTION_WIDTH, window.screen.width)
|
||||||
|
getCLS(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { cumulative_layout_shift: delta }))
|
||||||
|
getFCP(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { first_contentful_paint_ms: delta }))
|
||||||
|
getFID(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { first_input_delay_ms: delta }))
|
||||||
|
getLCP(({ delta, id }: Metric) => sendAnalyticsEvent(EventName.WEB_VITALS, { largest_contentful_paint_ms: delta }))
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user