add posthog (#1899)

* add posthog

* update url

* change provider location

* tests

* final

package-lock.json

@@ -37,6 +37,7 @@
         "match-sorter": "^6.3.1",
         "myetherwallet-blockies": "^0.1.1",
         "next": "13.0.5",
+        "posthog-js": "^1.51.4",
         "query-string": "^8.1.0",
         "react": "^18.2.0",
         "react-clipboard.js": "^2.0.16",
@@ -26682,6 +26683,11 @@
       "integrity": "sha512-uJQyMrX5IJZkhoEUBQ3EjxkeiZkppBd5jS/fMTJmfZxLSiaQjv2zD0kTvuvkSH89uFvgSlB6ueGpjD3HWN7Bxw==",
       "dev": true
     },
+    "node_modules/fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "node_modules/figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -38621,6 +38627,15 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/posthog-js": {
+      "version": "1.51.4",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.51.4.tgz",
+      "integrity": "sha512-YaozVcVdnsoj7yuwXo8mBHrQCagmZSR799QvaRfwL9EhDWMqCnV1Kh0Dj1GjX9/fLYIHYU4Tl8iKtqGkdt/Nxg==",
+      "dependencies": {
+        "fflate": "^0.4.1",
+        "rrweb-snapshot": "^1.1.14"
+      }
+    },
     "node_modules/preact": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.1.tgz",
@@ -41543,6 +41558,11 @@
       "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug==",
       "dev": true
     },
+    "node_modules/rrweb-snapshot": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz",
+      "integrity": "sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ=="
+    },
     "node_modules/rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
@@ -67905,6 +67925,11 @@
       "integrity": "sha512-uJQyMrX5IJZkhoEUBQ3EjxkeiZkppBd5jS/fMTJmfZxLSiaQjv2zD0kTvuvkSH89uFvgSlB6ueGpjD3HWN7Bxw==",
       "dev": true
     },
+    "fflate": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz",
+      "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -77162,6 +77187,15 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "posthog-js": {
+      "version": "1.51.4",
+      "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.51.4.tgz",
+      "integrity": "sha512-YaozVcVdnsoj7yuwXo8mBHrQCagmZSR799QvaRfwL9EhDWMqCnV1Kh0Dj1GjX9/fLYIHYU4Tl8iKtqGkdt/Nxg==",
+      "requires": {
+        "fflate": "^0.4.1",
+        "rrweb-snapshot": "^1.1.14"
+      }
+    },
     "preact": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.1.tgz",
@@ -79385,6 +79419,11 @@
         }
       }
     },
+    "rrweb-snapshot": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/rrweb-snapshot/-/rrweb-snapshot-1.1.14.tgz",
+      "integrity": "sha512-eP5pirNjP5+GewQfcOQY4uBiDnpqxNRc65yKPW0eSoU1XamDfc4M8oqpXGMyUyvLyxFDB0q0+DChuxxiU2FXBQ=="
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

package.json

@@ -50,6 +50,7 @@
     "match-sorter": "^6.3.1",
     "myetherwallet-blockies": "^0.1.1",
     "next": "13.0.5",
+    "posthog-js": "^1.51.4",
     "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-clipboard.js": "^2.0.16",

src/pages/_app.tsx

@@ -1,5 +1,5 @@
 // import App from "next/app";
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import type { AppProps /*, AppContext */ } from 'next/app'
 import Web3Provider from '@context/Web3'
 import { UserPreferencesProvider } from '@context/UserPreferences'
@@ -12,9 +12,31 @@ import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../stylesGlobal/styles.css'
 import Decimal from 'decimal.js'
 import MarketMetadataProvider from '@context/MarketMetadata'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { useRouter } from 'next/router'
+
+// Check that PostHog is client-side (used to handle Next.js SSR)
+if (typeof window !== 'undefined') {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://eu.posthog.com'
+  })
+}
 
 function MyApp({ Component, pageProps }: AppProps): ReactElement {
   Decimal.set({ rounding: 1 })
+  const router = useRouter()
+
+  useEffect(() => {
+    // Track page views
+    const handleRouteChange = () => posthog?.capture('$pageview')
+    router.events.on('routeChangeComplete', handleRouteChange)
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
+
   return (
     <MarketMetadataProvider>
       <Web3Provider>
@@ -22,9 +44,11 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement {
           <UserPreferencesProvider>
             <PricesProvider>
               <ConsentProvider>
-                <App>
+                <PostHogProvider client={posthog}>
-                  <Component {...pageProps} />
+                  <App>
-                </App>
+                    <Component {...pageProps} />
+                  </App>
+                </PostHogProvider>
               </ConsentProvider>
             </PricesProvider>
           </UserPreferencesProvider>