Use SimpleAnalytics for events

RevokeCash · May 1, 2024 · 815a623 · 815a623
1 parent 358629c
commit 815a623
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 40 deletions.
diff --git a/app/Analytics.tsx b/app/Analytics.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { usePathname } from 'lib/i18n/navigation';
+import { init } from 'lib/utils/analytics';
+import Script from 'next/script';
+import { useEffect } from 'react';
+
+const Analytics = () => {
+  const path = usePathname();
+
+  // Mixpanel
+  useEffect(() => {
+    init();
+    // track('Viewed Page', { path });
+  }, []);
+
+  // SimpleAnalytics
+  return (
+    <>
+      <Script>
+        {
+          'window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};'
+        }
+      </Script>
+      <Script async defer src="/assets/js/sa-v11.js" />
+    </>
+  );
+};
+
+export default Analytics;
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -1,4 +1,5 @@
 import { SpeedInsights } from '@vercel/speed-insights/next';
+import Analytics from 'app/Analytics';
 import ToastifyConfig from 'components/common/ToastifyConfig';
 import Footer from 'components/footer/Footer';
 import Header from 'components/header/Header';
@@ -7,10 +8,8 @@ import { QueryProvider } from 'lib/hooks/QueryProvider';
 import { EthereumProvider } from 'lib/hooks/ethereum/EthereumProvider';
 import { ColorThemeProvider } from 'lib/hooks/useColorTheme';
 import { locales } from 'lib/i18n/config';
-import { init } from 'lib/utils/analytics';
 import { Metadata } from 'next';
 import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-import Script from 'next/script';
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import 'react-toastify/dist/ReactToastify.css';
 import * as timeago from 'timeago.js';
@@ -25,8 +24,6 @@ timeago.register('ja', timeagoJa);
 timeago.register('ru', timeagoRu);
 timeago.register('zh', timeagoZh);
 
-init();
-
 interface Props {
   children: React.ReactNode;
   params: {
@@ -58,6 +55,9 @@ const MainLayout = ({ children, params }: Props) => {
 
   return (
     <html lang={params.locale}>
+      <head>
+        <Analytics />
+      </head>
       <body>
         <QueryProvider>
           <EthereumProvider>
@@ -76,7 +76,6 @@ const MainLayout = ({ children, params }: Props) => {
         </QueryProvider>
         <SpeedInsights sampleRate={0.1} />
       </body>
-      <Script async defer src="/assets/js/sa-v11.js" />
     </html>
   );
 };

diff --git a/components/allowances/dashboard/controls/FilterSelect.tsx b/components/allowances/dashboard/controls/FilterSelect.tsx
@@ -6,7 +6,6 @@ import { useColorTheme } from 'lib/hooks/useColorTheme';
 import { useMounted } from 'lib/hooks/useMounted';
 import { AllowanceData } from 'lib/interfaces';
 import { normaliseLabel } from 'lib/utils';
-import { track } from 'lib/utils/analytics';
 import { updateTableFilters } from 'lib/utils/table';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
@@ -71,7 +70,6 @@ const FilterSelect = ({ table }: Props) => {
     const tableFilters = generateTableFilters(options, selectedFilters);
     const ignoreIds = [ColumnId.SPENDER];
     updateTableFilters(table, tableFilters, ignoreIds);
-    track('Updated Filters', { filters: tableFilters });
   }, [selectedFilters]);
 
   const displayOption = (option: Option, { selectValue }: FormatOptionLabelMeta<Option>) => {

diff --git a/components/allowances/dashboard/controls/SortSelect.tsx b/components/allowances/dashboard/controls/SortSelect.tsx
@@ -5,7 +5,6 @@ import { useColorTheme } from 'lib/hooks/useColorTheme';
 import { useMounted } from 'lib/hooks/useMounted';
 import { AllowanceData } from 'lib/interfaces';
 import { normaliseLabel } from 'lib/utils';
-import { track } from 'lib/utils/analytics';
 import { useTranslations } from 'next-intl';
 import { useEffect, useMemo } from 'react';
 import useLocalStorage from 'use-local-storage';
@@ -34,7 +33,6 @@ const SortSelect = ({ table }: Props) => {
   useEffect(() => {
     if (!selectedSort) return;
     table.setSorting(() => [selectedSort]);
-    track('Updated Sorting', { column: selectedSort.id, desc: selectedSort.desc });
   }, [selectedSort]);
 
   const options = useMemo(() => {

diff --git a/components/common/DonateButton.tsx b/components/common/DonateButton.tsx
@@ -6,7 +6,7 @@ import Modal from 'components/common/Modal';
 import { DONATION_ADDRESS } from 'lib/constants';
 import { getWalletAddress } from 'lib/utils';
 import { track } from 'lib/utils/analytics';
-import { getChainNativeToken, getDefaultDonationAmount } from 'lib/utils/chains';
+import { getChainName, getChainNativeToken, getDefaultDonationAmount } from 'lib/utils/chains';
 import { useTranslations } from 'next-intl';
 import type { MutableRefObject, ReactText } from 'react';
 import { useEffect, useState } from 'react';
@@ -66,7 +66,7 @@ const DonateButton = ({ size, style, className, parentToastRef }: Props) => {
 
       toast.info(t('common.toasts.donation_sent'));
 
-      track('Donated', { chainId, amount: Number(amount) });
+      track('Donated', { chainName: getChainName(chainId), nativeToken, amount: Number(amount) });
 
       handleClose();
     } catch (err) {

diff --git a/lib/utils/analytics.ts b/lib/utils/analytics.ts
@@ -1,17 +1,16 @@
-import mixpanel from 'mixpanel-browser';
+// import mixpanel from 'mixpanel';
 
 export const init = () => {
-  if (typeof window === 'undefined') return;
-
-  if (process.env.NEXT_PUBLIC_MIXPANEL_API_KEY) {
-    mixpanel?.init(process.env.NEXT_PUBLIC_MIXPANEL_API_KEY, { ip: false });
-  }
+  // if (process.env.NEXT_PUBLIC_MIXPANEL_API_KEY) {
+  //   mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_API_KEY, { geolocate: false });
+  // }
 };
 
 export const track = (eventName: string, eventProperties: any) => {
+  // if (process.env.NEXT_PUBLIC_MIXPANEL_API_KEY) {
+  //   mixpanel.track(eventName, eventProperties);
+  // }
   if (typeof window === 'undefined') return;
 
-  if (process.env.NEXT_PUBLIC_MIXPANEL_API_KEY) {
-    mixpanel?.track(eventName, eventProperties);
-  }
+  (window as any)?.sa_event(eventName, eventProperties);
 };
diff --git a/package.json b/package.json
@@ -36,7 +36,6 @@
     "iron-session": "^8.0.1",
     "ky": "^1.2.3",
     "md5": "^2.3.0",
-    "mixpanel-browser": "^2.49.0",
     "next": "^14.2.1",
     "next-intl": "^3.11.1",
     "p-queue": "^8.0.1",
@@ -69,7 +68,6 @@
     "@localazy/cli": "^1.7.7",
     "@tailwindcss/typography": "^0.5.12",
     "@types/md5": "^2.3.5",
-    "@types/mixpanel-browser": "^2.47.5",
     "@types/node": "^18.19.26",
     "@types/nprogress": "^0.2.3",
     "@types/react": "18.2.42",

diff --git a/yarn.lock b/yarn.lock
@@ -2636,13 +2636,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/mixpanel-browser@npm:^2.47.5":
-  version: 2.47.5
-  resolution: "@types/mixpanel-browser@npm:2.47.5"
-  checksum: 98fda58f1ac80e8a0e7422af8ea0fa71ec330186c5d12468d9b2ab56e257cb928f19f6eddfdf2717d48810dfa8777590f66d0e05f041766e3434e54507787647
-  languageName: node
-  linkType: hard
-
 "@types/ms@npm:*":
   version: 0.7.31
   resolution: "@types/ms@npm:0.7.31"
@@ -8264,13 +8257,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mixpanel-browser@npm:^2.49.0":
-  version: 2.49.0
-  resolution: "mixpanel-browser@npm:2.49.0"
-  checksum: 24da033aa2a07d49518a4f3646fdf41f6408cb2944aa0001e234d92bdf42b23d28c0e3f277c7196a564f47318d48545811a90eab87c2d215200ec82f369ab46b
-  languageName: node
-  linkType: hard
-
 "mkdirp@npm:^0.5.5":
   version: 0.5.6
   resolution: "mkdirp@npm:0.5.6"
@@ -9567,8 +9553,8 @@ __metadata:
 
 "rate-limiter-flexible@patch:rate-limiter-flexible@npm%3A5.0.0#./.yarn/patches/rate-limiter-flexible-npm-5.0.0-9e3dae9215.patch::locator=revoke.cash%40workspace%3A.":
   version: 5.0.0
-  resolution: "rate-limiter-flexible@patch:rate-limiter-flexible@npm%3A5.0.0#./.yarn/patches/rate-limiter-flexible-npm-5.0.0-9e3dae9215.patch::version=5.0.0&hash=79466e&locator=revoke.cash%40workspace%3A."
-  checksum: 08bf38f812e9e8e0bf7820770fb85c349558fdbffa443b7d6068dc3e85d3a6d6e97cee87a68c6040a638126b55ec88d62445dd20a855cb7c1042914dcfdb2091
+  resolution: "rate-limiter-flexible@patch:rate-limiter-flexible@npm%3A5.0.0#./.yarn/patches/rate-limiter-flexible-npm-5.0.0-9e3dae9215.patch::version=5.0.0&hash=d068a1&locator=revoke.cash%40workspace%3A."
+  checksum: cff0fe7c5826f3222dbec7afe1b709225bb87d9594827050c5102f340dcf809d20c572da2f02bf2b37bee745ef371a9e7fc22f6e4603382aec5eee001bf4e89e
   languageName: node
   linkType: hard
 
@@ -10153,7 +10139,6 @@ __metadata:
     "@tanstack/react-table": 8.8.5
     "@tippyjs/react": ^4.2.6
     "@types/md5": ^2.3.5
-    "@types/mixpanel-browser": ^2.47.5
     "@types/node": ^18.19.26
     "@types/nprogress": ^0.2.3
     "@types/react": 18.2.42
@@ -10174,7 +10159,6 @@ __metadata:
     ky: ^1.2.3
     lint-staged: ^15.2.2
     md5: ^2.3.0
-    mixpanel-browser: ^2.49.0
     next: ^14.2.1
     next-bundle-analyzer: ^0.6.8
     next-circular-dependency: ^1.0.1