From 66fb89f1f88ac49cb405edc243e1679203e3eaf6 Mon Sep 17 00:00:00 2001 From: riordanp Date: Thu, 26 Oct 2023 15:00:05 +0100 Subject: [PATCH] Add global pageview properties for telemetry (#301) * Add global pageview properties for telemetry * Add accountCreate event --- components/account/CreateAccountForm.tsx | 9 ++++ pages/_app.tsx | 55 +++++++++++++++++++----- utils/telemetry.ts | 1 + 3 files changed, 54 insertions(+), 11 deletions(-) diff --git a/components/account/CreateAccountForm.tsx b/components/account/CreateAccountForm.tsx index 9c8f68fc..1c2c6f80 100644 --- a/components/account/CreateAccountForm.tsx +++ b/components/account/CreateAccountForm.tsx @@ -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() 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'), diff --git a/pages/_app.tsx b/pages/_app.tsx index 891194f1..195b058e 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -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 ( - + <> Mango Markets @@ -148,6 +141,7 @@ function MyApp({ Component, pageProps }: AppProps) { + @@ -155,12 +149,51 @@ function MyApp({ Component, pageProps }: AppProps) { - + ) } 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 ( + + ) +} + const PageTitle = () => { const router = useRouter() const { selectedMarket } = useSelectedMarket() diff --git a/utils/telemetry.ts b/utils/telemetry.ts index a308ea4a..cc02d005 100644 --- a/utils/telemetry.ts +++ b/utils/telemetry.ts @@ -1,4 +1,5 @@ export type TelemetryEvents = { + accountCreate: { accountNum: number; enableNotifications: boolean } rewardsViewLeaderboard: never rewardsOpenRender: never rewardsCloseRender: { rewards: number; early: boolean }