diff --git a/web/containers/Providers/index.tsx b/web/containers/Providers/index.tsx
index 2aabb96bf5..b0dce66d2e 100644
--- a/web/containers/Providers/index.tsx
+++ b/web/containers/Providers/index.tsx
@@ -6,6 +6,8 @@ import { Toaster } from 'react-hot-toast'
import { TooltipProvider } from '@janhq/uikit'
+import { PostHogProvider } from 'posthog-js/react'
+
import EventListenerWrapper from '@/containers/Providers/EventListener'
import JotaiWrapper from '@/containers/Providers/Jotai'
import ThemeWrapper from '@/containers/Providers/Theme'
@@ -18,6 +20,8 @@ import {
setupBaseExtensions,
} from '@/services/extensionService'
+import { instance } from '@/utils/posthog'
+
import { extensionManager } from '@/extension'
const Providers = (props: PropsWithChildren) => {
@@ -63,18 +67,20 @@ const Providers = (props: PropsWithChildren) => {
}, [setupCore])
return (
-
-
- {setupCore && activated && (
-
-
- {children}
-
-
-
- )}
-
-
+
+
+
+ {setupCore && activated && (
+
+
+ {children}
+
+
+
+ )}
+
+
+
)
}
diff --git a/web/next.config.js b/web/next.config.js
index fd860aa5c7..936bd76ced 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -28,6 +28,12 @@ const nextConfig = {
'https://cdn.jsdelivr.net/npm/@janhq/plugin-catalog@latest/dist/index.js'
),
VERSION: JSON.stringify(packageJson.version),
+ ANALYTICS_ID:
+ process.env.ANALYTICS_ID ??
+ JSON.stringify('phc_cJ95zWbMwdef6nVasPCoSNOvV8lUcL5IykIYOoyGXVm'),
+ ANALYTICS_HOST:
+ process.env.ANALYTICS_HOST ??
+ JSON.stringify('https://app.posthog.com'),
}),
]
return config
diff --git a/web/package.json b/web/package.json
index 15d2830b09..61c0793347 100644
--- a/web/package.json
+++ b/web/package.json
@@ -29,6 +29,7 @@
"next": "14.0.1",
"next-themes": "^0.2.1",
"postcss": "8.4.31",
+ "posthog-js": "^1.95.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.47.0",
diff --git a/web/types/index.d.ts b/web/types/index.d.ts
index ddb608a7aa..5e7b401ae9 100644
--- a/web/types/index.d.ts
+++ b/web/types/index.d.ts
@@ -6,6 +6,8 @@ export {}
declare global {
declare const PLUGIN_CATALOG: string
declare const VERSION: string
+ declare const ANALYTICS_ID: string
+ declare const ANALYTICS_HOST: string
interface Core {
api: APIFunctions
events: EventEmitter
diff --git a/web/utils/posthog.ts b/web/utils/posthog.ts
new file mode 100644
index 0000000000..b490842dae
--- /dev/null
+++ b/web/utils/posthog.ts
@@ -0,0 +1,15 @@
+import posthog, { Properties } from 'posthog-js'
+
+posthog.init(ANALYTICS_ID, {
+ api_host: ANALYTICS_HOST,
+})
+
+export const instance = posthog
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const trackEvent = (name: string, properties?: Properties) => {
+ posthog.capture(name, properties)
+}
+
+export enum AnalyticsEvent {
+}