Add PostHog Analytics

frontend/src/App.js

@@ -25,10 +25,10 @@ export default ({ history, location }) => {
     useEffect(() => {
         if (getCookieConsentValue() === 'true') {
             AnalyticsService.init()
-            AnalyticsService.pageView(window.location)
-            const unlisten = history.listen(AnalyticsService.pageView)
+            AnalyticsService.pageView(window.location) // Initial page view tracking
+            const unlisten = history.listen(AnalyticsService.pageView) // Listen for route changes
             return () => {
-                unlisten()
+                unlisten() // Cleanup listener on component unmount
             }
         }
     }, [location, history])

frontend/src/constants/config.js

@@ -35,6 +35,14 @@ const settings = {
         required: false,
         value: process.env.REACT_APP_GOOGLE_ANALYTICS_ID,
     },
+    POSTHOG_API_KEY: {
+        required: false,
+        value: process.env.REACT_APP_POSTHOG_PROJECT_API_KEY,
+    },
+    POSTHOG_API_HOST: {
+        required: false,
+        value: process.env.REACT_APP_POSTHOG_API_HOST || 'https://us.i.posthog.com',
+    },
     ID_TOKEN_NAMESPACE: {
         required: true,
         value:

frontend/src/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import { Router } from 'react-router-dom'
 import App from './App'
 import * as serviceWorker from './serviceWorker'
 import './i18n'
@@ -16,6 +17,8 @@ import configureStore, { history } from 'redux/configureStore'
 import config from 'constants/config'
 // import theme from './material-ui-theme'
 import theme from './junctionTheme'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fab } from '@fortawesome/free-brands-svg-icons'
@@ -25,7 +28,7 @@ library.add(fab)
 const { store, persistor } = configureStore()
 
 /** Disable log statements in production */
-function noop() {}
+function noop() { }
 
 if (!config.IS_DEBUG) {
     console.log = noop
@@ -48,6 +51,14 @@ WebFont.load({
     },
 })
 
+
+// Add PostHog
+posthog.init(config.POSTHOG_API_KEY, {
+    api_host: config.POSTHOG_API_HOST,
+    person_profiles: 'identified_only',
+    capture_pageview: false
+})
+
 ReactDOM.render(
     <Provider store={store}>
         <PersistGate
@@ -70,7 +81,11 @@ ReactDOM.render(
                         >
                             <Notifier />
                             <CssBaseline />
-                            <App history={history} />
+                            <PostHogProvider client={posthog}>
+                                <Router history={history}>
+                                    <App history={history} location={window.location} />
+                                </Router>
+                            </PostHogProvider>
                         </SnackbarProvider>
                     </ThemeProvider>
                 </StylesProvider>

frontend/src/services/analytics.js

@@ -1,49 +1,39 @@
 import ReactGA from 'react-ga'
 import ReactPixel from 'react-facebook-pixel'
 import config from 'constants/config'
+import posthog from 'posthog-js'
 
 const AnalyticsService = {}
 
 AnalyticsService.init = () => {
-    if (config.GOOGLE_ANALYTICS_ID) {
-        ReactGA.initialize(config.GOOGLE_ANALYTICS_ID)
-    }
-
-    if (config.FACEBOOK_PIXEL_ID) {
-        ReactPixel.init(
-            config.FACEBOOK_PIXEL_ID,
-            {
-                autoConfig: true,
-                debug: false,
-            },
-            {},
-        )
+    if (config.POSTHOG_API_KEY) {
+        posthog.init(config.POSTHOG_API_KEY, { api_host: config.POSTHOG_API_HOST })
     }
 }
 
 AnalyticsService.pageView = location => {
-    if (config.GOOGLE_ANALYTICS_ID) {
-        ReactGA.pageview(location.pathname)
+    if (config.POSTHOG_API_KEY) {
+        posthog.capture('$pageview', { path: location.pathname })
     }
 }
 
 AnalyticsService.events = {
     LOG_IN: () => {
-        ReactPixel.track('CompleteRegistration', {
+        posthog.capture('CompleteRegistration', {
             value: 0.1,
             currency: 'EUR',
         })
     },
     VIEW_EVENT: slug => {
-        ReactPixel.track('ViewContent', {
+        posthog.capture('ViewContent', {
             value: 0.1,
             currency: 'EUR',
             content_ids: slug,
             content_type: 'product',
         })
     },
     BEGIN_REGISTRATION: slug => {
-        ReactPixel.track('AddToCart', {
+        posthog.capture('AddToCart', {
             value: 0.5,
             currency: 'EUR',
             contents: [
@@ -56,7 +46,7 @@ AnalyticsService.events = {
         })
     },
     COMPLETE_REGISTRATION: slug => {
-        ReactPixel.track('Purchase', {
+        posthog.capture('Purchase', {
             value: 1,
             currency: 'EUR',
             contents: [

package.json

@@ -61,6 +61,7 @@
         "next-auth": "^4.22.1",
         "pino": "^6.3.1",
         "pino-pretty": "^4.0.0",
+        "posthog-js": "^1.154.5",
         "react-helmet": "^6.1.0",
         "react-pdf": "^4.1.0",
         "uuid": "^8.3.2",