From 792fa7fba0d0a5c492423ae73a542eaecda4b940 Mon Sep 17 00:00:00 2001 From: Nevo David Date: Wed, 30 Oct 2024 22:16:08 +0700 Subject: [PATCH] feat: posthog --- apps/frontend/src/app/layout.tsx | 8 ++++- .../helpers/src/utils/use.fire.events.ts | 5 +++ .../src/helpers/posthog.tsx | 28 ++++++++++++++++ package-lock.json | 32 +++++++++++++++++++ package.json | 1 + 5 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 libraries/react-shared-libraries/src/helpers/posthog.tsx diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx index f07744e0..4f48fed8 100644 --- a/apps/frontend/src/app/layout.tsx +++ b/apps/frontend/src/app/layout.tsx @@ -11,6 +11,7 @@ import PlausibleProvider from 'next-plausible'; import clsx from 'clsx'; import { VariableContextComponent } from '@gitroom/react/helpers/variable.context'; import { Fragment } from 'react'; +import { PHProvider } from '@gitroom/react/helpers/posthog'; const chakra = Chakra_Petch({ weight: '400', subsets: ['latin'] }); @@ -44,7 +45,12 @@ export default async function AppLayout({ children }: { children: ReactNode }) { - {children} + + {children} + diff --git a/libraries/helpers/src/utils/use.fire.events.ts b/libraries/helpers/src/utils/use.fire.events.ts index 07141295..b23a2e86 100644 --- a/libraries/helpers/src/utils/use.fire.events.ts +++ b/libraries/helpers/src/utils/use.fire.events.ts @@ -1,14 +1,19 @@ import { usePlausible } from 'next-plausible'; import { useCallback } from 'react'; import { useVariables } from '@gitroom/react/helpers/variable.context'; +import { usePostHog } from 'posthog-js/react'; export const useFireEvents = () => { const { billingEnabled } = useVariables(); const plausible = usePlausible(); + const posthog = usePostHog(); + return useCallback((name: string, props?: any) => { if (!billingEnabled) { return; } + + posthog.capture(name, props); plausible(name, { props }); }, []); }; diff --git a/libraries/react-shared-libraries/src/helpers/posthog.tsx b/libraries/react-shared-libraries/src/helpers/posthog.tsx new file mode 100644 index 00000000..18164ed7 --- /dev/null +++ b/libraries/react-shared-libraries/src/helpers/posthog.tsx @@ -0,0 +1,28 @@ +'use client'; + +import posthog from 'posthog-js'; +import { PostHogProvider } from 'posthog-js/react'; +import { FC, ReactNode, useEffect } from 'react'; + +export const PHProvider: FC<{ + children: ReactNode; + key?: string; + host?: string; +}> = ({ children, key, host }) => { + useEffect(() => { + if (!key || !host) { + return; + } + + posthog.init(key, { + api_host: host, + person_profiles: 'identified_only', + capture_pageview: false, // Disable automatic pageview capture, as we capture manually + }); + }, []); + + if (!key || !host) { + return <>{children}; + } + return {children}; +}; diff --git a/package-lock.json b/package-lock.json index 480fe6a7..f32c0339 100644 --- a/package-lock.json +++ b/package-lock.json @@ -99,6 +99,7 @@ "nx": "19.7.2", "openai": "^4.47.1", "polotno": "^2.10.5", + "posthog-js": "^1.178.0", "react": "18.3.1", "react-colorful": "^5.6.1", "react-dnd": "^16.0.1", @@ -17001,6 +17002,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/core-js": { + "version": "3.38.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.38.1.tgz", + "integrity": "sha512-OP35aUorbU3Zvlx7pjsFdu1rGNnD4pgw/CWoYzRY3t2EzoVT7shKHY1dlAy3f41cGIO7ZDPQimhGFTlEYkG/Hw==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-js-compat": { "version": "3.38.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.38.1.tgz", @@ -32488,6 +32499,22 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/posthog-js": { + "version": "1.178.0", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.178.0.tgz", + "integrity": "sha512-ILD4flNh72d5dycc4ZouKORlaVr+pDzl5TlZr1JgP0NBAoduHjhE7XZYwk7zdYkry7u0qAIpfv2306zJCW2vGg==", + "dependencies": { + "core-js": "^3.38.1", + "fflate": "^0.4.8", + "preact": "^10.19.3", + "web-vitals": "^4.2.0" + } + }, + "node_modules/posthog-js/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/preact": { "version": "10.24.2", "resolved": "https://registry.npmjs.org/preact/-/preact-10.24.2.tgz", @@ -38817,6 +38844,11 @@ "node": ">= 8" } }, + "node_modules/web-vitals": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz", + "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==" + }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", diff --git a/package.json b/package.json index 8b356af5..00b17a30 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "nx": "19.7.2", "openai": "^4.47.1", "polotno": "^2.10.5", + "posthog-js": "^1.178.0", "react": "18.3.1", "react-colorful": "^5.6.1", "react-dnd": "^16.0.1",