Add global pageview properties for telemetry (#301)
* Add global pageview properties for telemetry * Add accountCreate event
This commit is contained in:
parent
5ebf650900
commit
66fb89f1f8
|
@ -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'),
|
||||
|
|
|
@ -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,4 +1,5 @@
|
|||
export type TelemetryEvents = {
|
||||
accountCreate: { accountNum: number; enableNotifications: boolean }
|
||||
rewardsViewLeaderboard: never
|
||||
rewardsOpenRender: never
|
||||
rewardsCloseRender: { rewards: number; early: boolean }
|
||||
|
|
Loading…
Reference in New Issue