blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add global pageview properties for telemetry (#301) 

* Add global pageview properties for telemetry

* Add accountCreate event
This commit is contained in:
riordanp 2023-10-26 15:00:05 +01:00 committed by GitHub
parent 5ebf650900
commit 66fb89f1f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/account/CreateAccountForm.tsx
View File

@ -15,6 +15,8 @@ import { isMangoError } from 'types'
import { MAX_ACCOUNTS } from 'utils/constants'
import Switch from '@components/forms/Switch'
import NotificationCookieStore from '@store/notificationCookieStore'
import { usePlausible } from 'next-plausible'
import { TelemetryEvents } from 'utils/telemetry'
const getNextAccountNumber = (accounts: MangoAccount[]): number => {
if (accounts.length > 1) {
@ -43,6 +45,7 @@ const CreateAccountForm = ({
//whole context needed to sign msgs
const walletContext = useWallet()
const { maxSolDeposit } = useSolBalance()
const telemetry = usePlausible<TelemetryEvents>()
const setCookie = NotificationCookieStore((s) => s.setCookie)
const handleNewAccount = async () => {
@ -81,6 +84,12 @@ const CreateAccountForm = ({
s.mangoAccounts = reloadedMangoAccounts
})
}
telemetry('accountCreate', {
props: {
accountNum: newAccountNum,
enableNotifications: signToNotifications,
},
})
setLoading(false)
notify({
title: t('new-account-success'),

55
pages/_app.tsx
View File

@ -12,6 +12,7 @@ import {
import {
ConnectionProvider,
WalletProvider,
useWallet,
} from '@solana/wallet-adapter-react'
import {
PhantomWalletAdapter,
@ -29,7 +30,7 @@ import {
import { SolflareWalletAdapter } from '@solana/wallet-adapter-solflare'
import { clusterApiUrl } from '@solana/web3.js'
import TransactionNotification from '@components/notifications/TransactionNotification'
import { ThemeProvider } from 'next-themes'
import { ThemeProvider, useTheme } from 'next-themes'
import { appWithTranslation } from 'next-i18next'
import Layout from '../components/Layout'
import MangoProvider from '@components/MangoProvider'
@ -104,16 +105,8 @@ function MyApp({ Component, pageProps }: AppProps) {
? false
: true
const [sendTelemetry] = useLocalStorageState(SEND_TELEMETRY_KEY, true)
return (
<PlausibleProvider
domain="app.mango.markets"
customDomain="https://pl.mngo.cloud"
trackLocalhost={true}
selfHosted={true}
enabled={sendTelemetry}
>
<>
<Head>
<title>Mango Markets</title>
<link rel="icon" href="/favicon.ico" />
@ -148,6 +141,7 @@ function MyApp({ Component, pageProps }: AppProps) {
<ThemeProvider defaultTheme="Mango Classic" storageKey={THEME_KEY}>
<PageTitle />
<Layout>
<Telemetry />
<Component {...pageProps} />
</Layout>
<TransactionNotification />
@ -155,12 +149,51 @@ function MyApp({ Component, pageProps }: AppProps) {
</WalletProvider>
</ConnectionProvider>
</QueryClientProvider>
</PlausibleProvider>
</>
)
}
export default appWithTranslation(MyApp)
export const Telemetry = () => {
const router = useRouter()
const { wallet, connected } = useWallet()
const { theme } = useTheme()
const [sendTelemetry] = useLocalStorageState(SEND_TELEMETRY_KEY, true)
const telemetryProps = useMemo(() => {
const props = {
walletProvider: wallet?.adapter.name ?? 'unknown',
walletConnected: (wallet?.adapter.connected ?? 'false').toString(),
viewingAccount: router.asPath.includes('?address').toString(),
currentTheme: theme ?? 'unknown',
}
// Hack to update script tag
const el = document.getElementById('plausible')
if (el) {
Object.entries(props).forEach(([key, value]) => {
el.setAttribute(`event-${key}`, value)
})
}
return props
}, [wallet, connected, theme])
return (
<PlausibleProvider
domain="app.mango.markets"
customDomain="https://pl.mngo.cloud"
trackLocalhost={true}
selfHosted={true}
enabled={sendTelemetry}
scriptProps={{ id: 'plausible' }}
pageviewProps={telemetryProps}
/>
)
}
const PageTitle = () => {
const router = useRouter()
const { selectedMarket } = useSelectedMarket()

1
utils/telemetry.ts
View File

@ -1,4 +1,5 @@
export type TelemetryEvents = {
accountCreate: { accountNum: number; enableNotifications: boolean }
rewardsViewLeaderboard: never
rewardsOpenRender: never
rewardsCloseRender: { rewards: number; early: boolean }