add analytics with posthog (#2205)

.gitignore

@@ -14,3 +14,4 @@ neardev
 .docz
 serve*
 .vscode
+.env.local

website/docusaurus.config.js

@@ -26,6 +26,8 @@ const config = {
     fonts: {
       myFont: ['Inter', 'sans-serif'],
     },
+    REACT_APP_PUBLIC_POSTHOG_KEY: process.env.REACT_APP_PUBLIC_POSTHOG_KEY,
+    REACT_APP_PUBLIC_POSTHOG_HOST: process.env.REACT_APP_PUBLIC_POSTHOG_HOST
   },
   themes: ['@saucelabs/theme-github-codeblock', '@docusaurus/theme-mermaid'],
   onBrokenLinks: 'log',
@@ -141,7 +143,7 @@ const config = {
           label: 'Tools',
           position: 'left',
           items: [
-            { label: '🧰 All Tools', to: '/tools/welcome'},
+            { label: '🧰 All Tools', to: '/tools/welcome' },
             {
               type: 'html',
               value: '<hr/> <small class="subtitle"> Essentials </small>',

website/package.json

@@ -55,6 +55,7 @@
     "monaco-editor": "^0.44.0",
     "near-api-js": "^2.1.4",
     "near-social-vm": "github:NearSocial/VM#2.5.5",
+    "posthog-js": "^1.155.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
     "react-bootstrap-typeahead": "^6.3.2",

website/src/theme/Root.js

@@ -6,35 +6,55 @@ import Gleap from "gleap"; // See https://gleap.io/docs/javascript/ and https://
 import { withRouter } from 'react-router-dom';
 import { useHistory } from '@docusaurus/router';
 import useIsBrowser from '@docusaurus/useIsBrowser'; // https://docusaurus.io/docs/advanced/ssg#useisbrowser
-
+import { PostHogProvider } from 'posthog-js/react';
+import posthog from 'posthog-js';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function Root({ children, location }) {
   const isBrowser = useIsBrowser();
-
   const history = useHistory();
+  const { siteConfig: {customFields} } = useDocusaurusContext();
 
   useEffect(() => {
-    // pass message to dev.near.org (docs is embed there)
+    // Pass message to dev.near.org (docs is embedded there)
     const sendMessage = url => parent.postMessage({ type: 'urlChange', url }, 'https://dev.near.org/');
     sendMessage(location.pathname);
 
     const unlisten = history.listen(loc => sendMessage(loc.pathname));
     return () => { unlisten() };
   }, [history]);
 
-  if (isBrowser) {
-    const { initRudderAnalytics, recordPageView } = require('./scripts/rudderstack');
-
-    Gleap.initialize('K2v3kvAJ5XtPzNYSgk4Ulpe5ptgBkIMv');
-
-    const rudderAnalytics = initRudderAnalytics();
-    recordPageView(rudderAnalytics, location.pathname);
-  }
-
-  return <>{children}</>;
+  useEffect(() => {
+    if (isBrowser) {
+      const { initRudderAnalytics, recordPageView } = require('./scripts/rudderstack');
+
+      Gleap.initialize('K2v3kvAJ5XtPzNYSgk4Ulpe5ptgBkIMv');
+
+      const rudderAnalytics = initRudderAnalytics();
+      recordPageView(rudderAnalytics, location.pathname);
+
+      // Initialize PostHog
+      posthog.init(customFields.REACT_APP_PUBLIC_POSTHOG_KEY, {
+        api_host: customFields.REACT_APP_PUBLIC_POSTHOG_HOST,
+      });
+
+      // Track initial page view
+      posthog.capture('$pageview');
+
+      // Track page views on route changes
+      history.listen((location) => {
+        posthog.capture('$pageview', { path: location.pathname });
+      });
+    }
+  }, [isBrowser, history]);
+
+  return (
+    <PostHogProvider client={posthog}>
+      {children}
+    </PostHogProvider>
+  );
 }
 
 const router = withRouter(Root);
 
-
-export default router;
+export default router;