chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

posthog install. from: https://posthog.com/docs/libraries/next-js

Browse Source
This commit is contained in:
Nicholas Koben Kao 2024-01-19 19:38:35 -08:00
parent b2690ab2c5
commit a2d0e93172
6 changed files with 78 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/.env.example
View File

@ -16,4 +16,7 @@ SPACES_CDN_FORCE_PATH_STYLE="true"
MODAL_BUILDER_URL= MODAL_BUILDER_URL=
JWT_SECRET="openssl rand -hex 32" JWT_SECRET="openssl rand -hex 32"
PLAUSIBLE_DOMAIN= PLAUSIBLE_DOMAIN=
NEXT_PUBLIC_POSTHOG_KEY="your-api-key"
NEXT_PUBLIC_POSTHOG_HOST="your-ph-address"

BIN
web/bun.lockb
View File

Binary file not shown.

2
web/package.json
View File

@ -76,6 +76,8 @@
"next-themes": "^0.2.1", "next-themes": "^0.2.1",
"next-usequerystate": "^1.13.2", "next-usequerystate": "^1.13.2",
"pg": "^8.11.3", "pg": "^8.11.3",
"posthog-js": "^1.100.0",
"posthog-node": "^3.5.0",
"react": "^18", "react": "^18",
"react-day-picker": "^8.9.1", "react-day-picker": "^8.9.1",
"react-dom": "^18", "react-dom": "^18",

29
web/src/app/(app)/PostHogPageView.tsx Normal file
View File

@ -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() {
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
}

38
web/src/app/(app)/layout.tsx
View File

@ -7,6 +7,13 @@ import meta from "next-gen/config";
import PlausibleProvider from "next-plausible"; import PlausibleProvider from "next-plausible";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import { Toaster } from "sonner"; import { Toaster } from "sonner";
import { PHProvider } from "./providers";
import dynamic from "next/dynamic";
const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
ssr: false,
});
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -39,20 +46,23 @@ export default function RootLayout({
<PlausibleProvider domain={process.env.PLAUSIBLE_DOMAIN} /> <PlausibleProvider domain={process.env.PLAUSIBLE_DOMAIN} />
</head> </head>
)} )}
<body className={inter.className}> <PHProvider>
<main className="w-full flex min-h-[100dvh] flex-col items-center justify-start"> <body className={inter.className}>
<div className="z-[-1] fixed h-full w-full bg-white"> <PostHogPageView />
<div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" /> <main className="w-full flex min-h-[100dvh] flex-col items-center justify-start">
</div> <div className="z-[-1] fixed h-full w-full bg-white">
<div className="sticky w-full h-18 flex items-center justify-between gap-4 p-4 border-b border-gray-200"> <div className="absolute h-full w-full bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
<Navbar /> </div>
</div> <div className="sticky w-full h-18 flex items-center justify-between gap-4 p-4 border-b border-gray-200">
<div className="md:px-10 px-6 w-full h-[calc(100dvh-73px)]"> <Navbar />
{children} </div>
</div> <div className="md:px-10 px-6 w-full h-[calc(100dvh-73px)]">
<Toaster richColors /> {children}
</main> </div>
</body> <Toaster richColors />
</main>
</body>
</PHProvider>
</TooltipProvider> </TooltipProvider>
</ClerkProvider> </ClerkProvider>
</html> </html>

19
web/src/app/(app)/providers.tsx Normal file
View File

@ -0,0 +1,19 @@
// app/providers.tsx
'use client'
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 function PHProvider({
children,
}: {
children: React.ReactNode
}) {
return <PostHogProvider client={posthog}>{children}</PostHogProvider>
}