50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import posthog from "posthog-js"
|
|
import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
|
|
import { Suspense, useEffect } from "react"
|
|
import { usePathname, useSearchParams } from "next/navigation"
|
|
|
|
function PathnameTracker() {
|
|
const posthogClient = usePostHog()
|
|
const pathname = usePathname()
|
|
const searchParams = useSearchParams()
|
|
|
|
useEffect(() => {
|
|
if (posthogClient) {
|
|
posthogClient.capture('$pageview', {
|
|
path: pathname + (searchParams.toString() ? `?${searchParams.toString()}` : ''),
|
|
})
|
|
}
|
|
}, [posthogClient, pathname, searchParams])
|
|
|
|
return null
|
|
}
|
|
|
|
function SuspendedPostHogPageView() {
|
|
return (
|
|
<Suspense fallback={null}>
|
|
<PathnameTracker />
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
export function PostHogProvider({ children }: { children: React.ReactNode }) {
|
|
useEffect(() => {
|
|
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
|
|
api_host: "/ingest",
|
|
ui_host: "https://us.posthog.com",
|
|
capture_pageview: 'history_change',
|
|
capture_pageleave: true,
|
|
capture_exceptions: true,
|
|
debug: process.env.NODE_ENV === "development",
|
|
})
|
|
}, [])
|
|
|
|
return (
|
|
<PHProvider client={posthog}>
|
|
<SuspendedPostHogPageView />
|
|
{children}
|
|
</PHProvider>
|
|
)
|
|
} |