diff --git a/frontend/src/App.js b/frontend/src/App.js index daf478ab..fe12615d 100755 --- a/frontend/src/App.js +++ b/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]) diff --git a/frontend/src/constants/config.js b/frontend/src/constants/config.js index 7190e238..126721d5 100644 --- a/frontend/src/constants/config.js +++ b/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: diff --git a/frontend/src/index.js b/frontend/src/index.js index 50245eed..7308794c 100755 --- a/frontend/src/index.js +++ b/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( - + + + + + diff --git a/frontend/src/services/analytics.js b/frontend/src/services/analytics.js index 17707107..76acf7a6 100644 --- a/frontend/src/services/analytics.js +++ b/frontend/src/services/analytics.js @@ -1,41 +1,31 @@ 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, @@ -43,7 +33,7 @@ AnalyticsService.events = { }) }, 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: [ diff --git a/package.json b/package.json index dc715b19..f45b438b 100644 --- a/package.json +++ b/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",