✨(frontend) integrate posthog analytics

We integrate posthog, it will help us to track
user behavior and improve the product.
We get the configuration from the backend config
endpoint.

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -16,6 +16,7 @@ const config = {
     ['de-de', 'German'],
   ],
   LANGUAGE_CODE: 'en-us',
+  POSTHOG_KEY: {},
   SENTRY_DSN: null,
 };
 

src/frontend/apps/impress/package.json

@@ -31,6 +31,7 @@
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "next": "15.1.3",
+    "posthog-js": "1.204.0",
     "react": "*",
     "react-aria-components": "1.5.0",
     "react-dom": "*",

src/frontend/apps/impress/src/core/config/ConfigProvider.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren, useEffect } from 'react';
 
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { configureCrispSession } from '@/services';
+import { PostHogProvider, configureCrispSession } from '@/services';
 import { useSentryStore } from '@/stores/useSentryStore';
 
 import { useConfig } from './api/useConfig';
@@ -45,5 +45,5 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
     );
   }
 
-  return children;
+  return <PostHogProvider conf={conf.POSTHOG_KEY}>{children}</PostHogProvider>;
 };

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import { APIError, errorCauses, fetchAPI } from '@/api';
 import { Theme } from '@/cunningham/';
+import { PostHogConf } from '@/services';
 
 interface ConfigResponse {
   LANGUAGES: [string, string][];
@@ -11,6 +12,7 @@ interface ConfigResponse {
   CRISP_WEBSITE_ID?: string;
   FRONTEND_THEME?: Theme;
   MEDIA_BASE_URL?: string;
+  POSTHOG_KEY?: PostHogConf;
   SENTRY_DSN?: string;
 }
 

src/frontend/apps/impress/src/services/Posthog.tsx

@@ -0,0 +1,46 @@
+import { Router } from 'next/router';
+import posthog from 'posthog-js';
+import { PostHogProvider as PHProvider } from 'posthog-js/react';
+import { PropsWithChildren, useEffect } from 'react';
+
+export interface PostHogConf {
+  id: string;
+  host: string;
+}
+
+interface PostHogProviderProps {
+  conf?: PostHogConf;
+}
+
+export function PostHogProvider({
+  children,
+  conf,
+}: PropsWithChildren<PostHogProviderProps>) {
+  useEffect(() => {
+    if (!conf?.id || !conf?.host || posthog.__loaded) {
+      return;
+    }
+
+    posthog.init(conf.id, {
+      api_host: conf.host,
+      person_profiles: 'always',
+      loaded: (posthog) => {
+        if (process.env.NODE_ENV === 'development') {
+          posthog.debug();
+        }
+      },
+      capture_pageview: false,
+      capture_pageleave: true,
+    });
+
+    const handleRouteChange = () => posthog?.capture('$pageview');
+
+    Router.events.on('routeChangeComplete', handleRouteChange);
+
+    return () => {
+      Router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [conf?.host, conf?.id]);
+
+  return <PHProvider client={posthog}>{children}</PHProvider>;
+}

src/frontend/apps/impress/src/services/index.ts

@@ -1 +1,2 @@
 export * from './Crisp';
+export * from './Posthog';