From 040759726ed74429b5a9a1a62ea7304cd6ebf4f0 Mon Sep 17 00:00:00 2001 From: Jin Young Bang Date: Sun, 28 Apr 2024 21:01:35 -0400 Subject: [PATCH] feat: implement posthog web analytics --- app/PostHogPageView.tsx | 29 +++++++++++++++++++++++++++++ app/layout.tsx | 17 +++++++++++++---- app/providers/index.tsx | 19 +++++++++++++++++++ package-lock.json | 15 +++++++++++++++ package.json | 1 + 5 files changed, 77 insertions(+), 4 deletions(-) create mode 100644 app/PostHogPageView.tsx diff --git a/app/PostHogPageView.tsx b/app/PostHogPageView.tsx new file mode 100644 index 0000000..61e275d --- /dev/null +++ b/app/PostHogPageView.tsx @@ -0,0 +1,29 @@ +// app/PostHogPageView.tsx +'use client' + +import { usePathname, useSearchParams } from "next/navigation"; +import { useEffect } from "react"; +import { usePostHog } from 'posthog-js/react'; + +export default function PostHogPageView() : null { + const pathname = usePathname(); + const searchParams = useSearchParams(); + const posthog = usePostHog(); + // Track pageviews + useEffect(() => { + 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 +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 160bead..05ef262 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,7 +2,12 @@ import './globals.css' import { SessionProvider } from "next-auth/react"; import { AuthProvider } from './contexts/AuthContext'; +import { PHProvider } from './providers'; +import dynamic from 'next/dynamic' +const PostHogPageView = dynamic(() => import('./PostHogPageView'), { + ssr: false, +}) export default function RootLayout({ children, @@ -11,11 +16,15 @@ export default function RootLayout({ }) { return ( - - + + + + {children} - - + + + + ) diff --git a/app/providers/index.tsx b/app/providers/index.tsx index 8e1a77b..2acf4a1 100644 --- a/app/providers/index.tsx +++ b/app/providers/index.tsx @@ -2,6 +2,16 @@ import { useSession, signIn } from "next-auth/react" import Loader from '@/components/Loader'; +import posthog from 'posthog-js' +import { PostHogProvider } from 'posthog-js/react' + +if (typeof window !== 'undefined') { + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { + api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST, + capture_pageview: false // Disable automatic pageview capture, as we capture manually + }) +} + export default function AdminSessionProvider({ children }: { @@ -24,3 +34,12 @@ export default function AdminSessionProvider({ ) } + + +export function PHProvider({ + children, +}: { + children: React.ReactNode +}) { + return {children} +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 369ab3a..5c8374e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "next": "13.4.9", "next-auth": "4.23.1", "postcss": "^8.4.29", + "posthog-js": "^1.130.0", "qrcode.react": "^3.1.0", "react": "18.2.0", "react-datepicker": "^4.17.0", @@ -2949,6 +2950,11 @@ "reusify": "^1.0.4" } }, + "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/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -4904,6 +4910,15 @@ "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, + "node_modules/posthog-js": { + "version": "1.130.0", + "resolved": "https://registry.npmjs.org/posthog-js/-/posthog-js-1.130.0.tgz", + "integrity": "sha512-bCrw5HunoXLybO20Q1bYEg68i5WCZWKxhStYJK4OR/9jrm7GwZ53GDrN78p8apFi0EH5ay4YZGbLFSkg+SsZWQ==", + "dependencies": { + "fflate": "^0.4.8", + "preact": "^10.19.3" + } + }, "node_modules/preact": { "version": "10.19.6", "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.6.tgz", diff --git a/package.json b/package.json index 080f9dd..b044441 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "next": "13.4.9", "next-auth": "4.23.1", "postcss": "^8.4.29", + "posthog-js": "^1.130.0", "qrcode.react": "^3.1.0", "react": "18.2.0", "react-datepicker": "^4.17.0",