Add PostHog analytics integration (#2844)

* Add PostHog analytics integration * chore: update .cspell.json * build(deps): update yarn.lock * chore: update .cspell.json
ever-co · Aug 7, 2024 · 46be66d · 46be66d
1 parent 6c57a90
commit 46be66d
Show file tree

Hide file tree

Showing 8 changed files with 125 additions and 22 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -360,7 +360,12 @@
 		"xlcard",
 		"xlight",
 		"yellowbox",
-		"vhidden"
+		"vhidden",
+		"POSTHOG",
+		"posthog",
+		"pageviews",
+		"pageleave",
+		"pageview"
 	],
 	"useGitignore": true,
 	"ignorePaths": [

diff --git a/apps/web/.env b/apps/web/.env
@@ -117,3 +117,7 @@ NEXT_PUBLIC_JITSU_BROWSER_WRITE_KEY=
 
 # Chatwoot
 NEXT_PUBLIC_CHATWOOT_API_KEY=
+
+# PostHog
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
diff --git a/apps/web/app/[locale]/integration/posthog/page-view.tsx b/apps/web/app/[locale]/integration/posthog/page-view.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { usePostHog } from 'posthog-js/react';
+import { POSTHOG_HOST, POSTHOG_KEY } from '@app/constants';
+
+export default function PostHogPageView(): null {
+	const pathname = usePathname();
+	const searchParams = useSearchParams();
+	const posthog = usePostHog();
+
+	useEffect(() => {
+		if (!POSTHOG_KEY.value || !POSTHOG_HOST.value) return;
+
+		// Track pageviews
+		if (pathname && posthog) {
+			let url = window.origin + pathname;
+			if (searchParams.toString()) {
+				url = url + `?${searchParams.toString()}`;
+			}
+			posthog.capture('$pageview', {
+				$current_url: url
+			});
+		}
+	}, [pathname, searchParams, posthog]);
+
+	return null;
+}
diff --git a/apps/web/app/[locale]/integration/posthog/provider.tsx b/apps/web/app/[locale]/integration/posthog/provider.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import { POSTHOG_HOST, POSTHOG_KEY } from '@app/constants';
+import posthog from 'posthog-js';
+import { PostHogProvider } from 'posthog-js/react';
+
+const key = POSTHOG_KEY.value;
+const host = POSTHOG_HOST.value;
+
+if (typeof window !== 'undefined' && key && host) {
+	posthog.init(key, {
+		api_host: host,
+		person_profiles: 'identified_only',
+		capture_pageview: false,
+		capture_pageleave: true
+	});
+}
+
+export function PHProvider({ children }: { children: React.ReactNode }) {
+	if (!key || !host) {
+		return <>{children}</>;
+	}
+
+	return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+}
diff --git a/apps/web/app/[locale]/layout.tsx b/apps/web/app/[locale]/layout.tsx
@@ -32,13 +32,20 @@ interface Props {
 import { Poppins } from 'next/font/google';
 import GlobalSkeleton from '@components/ui/global-skeleton';
 import NextAuthSessionProvider from 'lib/layout/next-auth-provider';
+import dynamic from 'next/dynamic';
+import { PHProvider } from './integration/posthog/provider';
 
 const poppins = Poppins({
 	subsets: ['latin'],
 	weight: '500',
 	variable: '--font-poppins',
 	display: 'swap'
 });
+
+const PostHogPageView = dynamic(() => import('./integration/posthog/page-view'), {
+	ssr: false
+});
+
 // export function generateStaticParams() {
 // 	return locales.map((locale: any) => ({ locale }));
 // }
@@ -124,27 +131,31 @@ const LocaleLayout = ({ children, params: { locale }, pageProps }: Props) => {
 				)}
 			</head> */}
 			<NextIntlClientProvider locale={locale} messages={messages} timeZone="Asia/Kolkata">
-				<body className={clsx('flex h-full flex-col dark:bg-[#191A20]')}>
-					<NextAuthSessionProvider>
-						<RecoilRoot>
-							<ThemeProvider
-								attribute="class"
-								defaultTheme="system"
-								enableSystem
-								disableTransitionOnChange
-							>
-								{loading && !pathname?.startsWith('/auth') ? (
-									<GlobalSkeleton />
-								) : (
-									<>
-										<AppState />
-										<JitsuRoot pageProps={pageProps}>{children}</JitsuRoot>
-									</>
-								)}
-							</ThemeProvider>
-						</RecoilRoot>
-					</NextAuthSessionProvider>
-				</body>
+				<PHProvider>
+					<body className={clsx('flex h-full flex-col dark:bg-[#191A20]')}>
+						<PostHogPageView />
+
+						<NextAuthSessionProvider>
+							<RecoilRoot>
+								<ThemeProvider
+									attribute="class"
+									defaultTheme="system"
+									enableSystem
+									disableTransitionOnChange
+								>
+									{loading && !pathname?.startsWith('/auth') ? (
+										<GlobalSkeleton />
+									) : (
+										<>
+											<AppState />
+											<JitsuRoot pageProps={pageProps}>{children}</JitsuRoot>
+										</>
+									)}
+								</ThemeProvider>
+							</RecoilRoot>
+						</NextAuthSessionProvider>
+					</body>
+				</PHProvider>
 			</NextIntlClientProvider>
 		</html>
 	);

diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
@@ -121,6 +121,10 @@ export const BOARD_FIREBASE_CONFIG = getNextPublicEnv(
 	process.env.NEXT_PUBLIC_BOARD_FIREBASE_CONFIG
 );
 
+export const POSTHOG_KEY = getNextPublicEnv('NEXT_PUBLIC_POSTHOG_KEY', process.env.NEXT_PUBLIC_POSTHOG_KEY);
+
+export const POSTHOG_HOST = getNextPublicEnv('NEXT_PUBLIC_POSTHOG_HOST', process.env.NEXT_PUBLIC_POSTHOG_HOST);
+
 // Jitsu
 export const jitsuConfiguration: () => JitsuOptions = () => ({
 	host: getNextPublicEnv('NEXT_PUBLIC_JITSU_BROWSER_URL', process.env.NEXT_PUBLIC_JITSU_BROWSER_URL).value,

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -102,6 +102,7 @@
 		"pako": "^2.1.0",
 		"polished": "^4.2.2",
 		"postcss": "^8.4.19",
+		"posthog-js": "^1.154.5",
 		"qs": "^6.11.2",
 		"react": "^18.2.0",
 		"react-beautiful-dnd": "^13.1.1",

diff --git a/yarn.lock b/yarn.lock
@@ -14546,6 +14546,11 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fflate@^0.4.8:
+  version "0.4.8"
+  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
+
 [email protected], figures@^3.0.0, figures@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -21715,6 +21720,15 @@ postgres-range@^1.1.1:
   resolved "https://registry.yarnpkg.com/postgres-range/-/postgres-range-1.1.3.tgz#9ccd7b01ca2789eb3c2e0888b3184225fa859f76"
   integrity sha512-VdlZoocy5lCP0c/t66xAfclglEapXPCIVhqqJRncYpvbCgImF0w67aPKfbqUMr72tO2k5q0TdTZwCLjPTI6C9g==
 
+posthog-js@^1.154.5:
+  version "1.154.5"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.154.5.tgz#1737ce0b31611ae291c3c301f356ec69b835c354"
+  integrity sha512-YYhWckDIRObfCrQpiLq+fdcDTIbQp8ebiKi0ueGohMRgugIG9LJVSpBgCeCHZm2C7sOxDUNcAr3T5VBDUSQoOg==
+  dependencies:
+    fflate "^0.4.8"
+    preact "^10.19.3"
+    web-vitals "^4.0.1"
+
 [email protected]:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.2.3.tgz#23d17376182af720b1060d5a4099843c7fe92fe4"
@@ -21727,6 +21741,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.11.3.tgz#8a7e4ba19d3992c488b0785afcc0f8aa13c78d19"
   integrity sha512-eY93IVpod/zG3uMF22Unl8h9KkrcKIRs2EGar8hwLZZDU1lkjph303V9HZBwufh2s736U6VXuhD109LYqPoffg==
 
+preact@^10.19.3:
+  version "10.23.1"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.23.1.tgz#d400107289bc979881c5212cb5f5cd22cd1dc38c"
+  integrity sha512-O5UdRsNh4vdZaTieWe3XOgSpdMAmkIYBCT3VhQDlKrzyCm8lUYsk0fmVEvoQQifoOjFRTaHZO69ylrzTW2BH+A==
+
 preact@~10.12.1:
   version "10.12.1"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.12.1.tgz#8f9cb5442f560e532729b7d23d42fd1161354a21"
@@ -25908,6 +25927,11 @@ wcwidth@^1.0.0, wcwidth@^1.0.1:
   dependencies:
     defaults "^1.0.3"
 
+web-vitals@^4.0.1:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.2.tgz#e883245180b95e175eb75a5ca8903b1a11597d7a"
+  integrity sha512-nYfoOqb4EmElljyXU2qdeE76KsvoHdftQKY4DzA9Aw8DervCg2bG634pHLrJ/d6+B4mE3nWTSJv8Mo7B2mbZkw==
+
 webidl-conversions@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"