diff --git a/package-lock.json b/package-lock.json index 1b2073d7c..afe33d9ef 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 26b5bff00..2f87f8ad0 100644 --- a/package.json +++ b/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", diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bdfd3851a..86ccc9d17 100644 --- a/src/pages/_app.tsx +++ b/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 ( @@ -22,9 +44,11 @@ function MyApp({ Component, pageProps }: AppProps): ReactElement { - - - + + + + +