feat: track pageviews

.env.example

@@ -1 +1,2 @@
+NEXT_PUBLIC_MIXPANEL_TOKEN='insertTokenHere'
 RAPID_API_KEY='insertAPIkeyHERE'

package.json

@@ -19,12 +19,14 @@
     "eslint": "8.38.0",
     "eslint-config-next": "13.3.0",
     "framer-motion": "^10.11.2",
+    "mixpanel-browser": "^2.47.0",
     "next": "^13.5.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "5.0.4"
   },
   "devDependencies": {
-    "@lhci/cli": "^0.12.0"
+    "@lhci/cli": "^0.12.0",
+    "@types/mixpanel-browser": "^2.47.3"
   }
 }

src/pages/index.tsx

@@ -1,8 +1,22 @@
 import Main from '@/components/Main';
 import Navigation from '@/components/Navigation';
 import { ChakraProvider } from '@chakra-ui/react';
+import mixpanel from 'mixpanel-browser';
+import React from 'react';
 
 export default function Home() {
+  React.useEffect(() => {
+    if (process.env.NEXT_PUBLIC_MIXPANEL_TOKEN) {
+      mixpanel.init(process.env.NEXT_PUBLIC_MIXPANEL_TOKEN, {
+        debug: true,
+        track_pageview: true,
+        persistence: 'localStorage',
+      });
+    } else {
+      console.warn('Mixpanel token not found');
+    }
+  }, []);
+
   return (
     <ChakraProvider>
       <Navigation />

yarn.lock

@@ -1243,6 +1243,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.192.tgz#5790406361a2852d332d41635d927f1600811285"
   integrity sha512-km+Vyn3BYm5ytMO13k9KTp27O75rbQ0NFw+U//g+PX7VZyjCioXaRFisqSIJRECljcTv73G3i6BpglNGHgUQ5A==
 
+"@types/mixpanel-browser@^2.47.3":
+  version "2.47.3"
+  resolved "https://registry.yarnpkg.com/@types/mixpanel-browser/-/mixpanel-browser-2.47.3.tgz#1c4c96c946aac102e8a4ed941a9ebaae9ff04f8a"
+  integrity sha512-lum9ZdfLihJ89XoCrBjB8le/Vg6ohYSR2/3AdfLWGZdhUBEgftncDO9+0uW08FSN6SLqy2s9zCf55YV5sNLNYA==
+
 "@types/node@*":
   version "20.5.9"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.9.tgz#a70ec9d8fa0180a314c3ede0e20ea56ff71aed9a"
@@ -3425,6 +3430,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
   integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
 
+mixpanel-browser@^2.47.0:
+  version "2.47.0"
+  resolved "https://registry.yarnpkg.com/mixpanel-browser/-/mixpanel-browser-2.47.0.tgz#4e7fd3bb660c6f63443efbd169d1cd327db71ed4"
+  integrity sha512-Ldrva0fRBEIFWmEibBQO1PulfpJVF3pf28Guk09lDirDaSQqqU/xs9zQLwN2rL5VwVtsP1aD3JaCgaa98EjojQ==
+
 mkdirp-classic@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"