add analytics with posthog (#2205)

Author: petersalomonsen

.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;

website/yarn.lock

@@ -7428,6 +7428,11 @@ feed@^4.2.2:
   dependencies:
     xml-js "^1.6.11"
 
+fflate@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 file-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
@@ -11386,6 +11391,20 @@ postcss@^8.4.24, postcss@^8.4.38:
     picocolors "^1.0.0"
     source-map-js "^1.2.0"
 
+posthog-js@^1.155.0:
+  version "1.155.0"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.155.0.tgz#e3c50f5152ccfd41945be4f2ea39668f4fd18cae"
+  integrity sha512-gxi72Qcp7Vnq6efe5gNxsq84zyEFd33NUmoLSgcbMPhxU30qgc89Aw/N2mRB4mGrD3Mq0rCnDJUzGFdN59nR0g==
+  dependencies:
+    fflate "^0.4.8"
+    preact "^10.19.3"
+    web-vitals "^4.0.1"
+
+preact@^10.19.3:
+  version "10.23.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.23.1.tgz#d400107289bc979881c5212cb5f5cd22cd1dc38c"
+  integrity sha512-O5UdRsNh4vdZaTieWe3XOgSpdMAmkIYBCT3VhQDlKrzyCm8lUYsk0fmVEvoQQifoOjFRTaHZO69ylrzTW2BH+A==
+
 prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
@@ -13873,6 +13892,11 @@ web-namespaces@^2.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
+web-vitals@^4.0.1:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.3.tgz#270c4baecfbc6ec6fc15da1989e465e5f9b94fb7"
+  integrity sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==
+
 web-worker@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/web-worker/-/web-worker-1.3.0.tgz#e5f2df5c7fe356755a5fb8f8410d4312627e6776"