-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Nick/neos 435 implement posthog for analytics (#952)
- Loading branch information
Showing
12 changed files
with
171 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,11 @@ | ||
| export interface SystemAppConfig { | ||
| isAuthEnabled: boolean; | ||
| publicAppBaseUrl: string; | ||
| posthog: PosthogConfig; | ||
| } | ||
|
|
||
| export interface PosthogConfig { | ||
| enabled: boolean; | ||
| key?: string; | ||
| host: string; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
90 changes: 90 additions & 0 deletions
90
frontend/apps/web/components/providers/posthog-provider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| 'use client'; | ||
| import { PosthogConfig, SystemAppConfig } from '@/app/config/app-config'; | ||
| import { useNeosyncUser } from '@/libs/hooks/useNeosyncUser'; | ||
| import { usePathname, useSearchParams } from 'next/navigation'; | ||
| import posthog from 'posthog-js'; | ||
| import { PostHogProvider, usePostHog } from 'posthog-js/react'; | ||
| import { ReactElement, ReactNode, useEffect } from 'react'; | ||
| import { useAccount } from './account-provider'; | ||
|
|
||
| interface PosthogPageviewProps { | ||
| config: PosthogConfig; | ||
| } | ||
|
|
||
| // Enables posthog, as well as turns on pageview tracking. | ||
| export function PostHogPageview(props: PosthogPageviewProps): JSX.Element { | ||
| const { config } = props; | ||
| const pathname = usePathname(); | ||
| const searchParams = useSearchParams(); | ||
|
|
||
| useEffect(() => { | ||
| if (typeof window !== 'undefined' && config.enabled && config.key) { | ||
| posthog.init(config.key, { | ||
| api_host: config.host, | ||
| capture_pageview: false, // Disable automatic pageview capture, as we capture manually | ||
| }); | ||
| } | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| if (pathname) { | ||
| let url = window.origin + pathname; | ||
| if (searchParams && searchParams.toString()) { | ||
| url = url + `?${searchParams.toString()}`; | ||
| } | ||
| posthog.capture('$pageview', { | ||
| $current_url: url, | ||
| }); | ||
| } | ||
| }, [pathname, searchParams]); | ||
|
|
||
| return <></>; | ||
| } | ||
|
|
||
| interface PHProps { | ||
| children: ReactNode; | ||
| } | ||
|
|
||
| // Enables Posthog to be used througout the app via the hook. | ||
| export function PHProvider({ children }: PHProps) { | ||
| return <PostHogProvider client={posthog}>{children}</PostHogProvider>; | ||
| } | ||
|
|
||
| interface Props { | ||
| systemConfig: SystemAppConfig; | ||
| } | ||
|
|
||
| // Handles setting global user data for the user so that it doesn't have to be set on every capture call. | ||
| export function PostHogIdentifier(props: Props): ReactElement { | ||
| const { systemConfig } = props; | ||
| const { data: userData, isLoading: isUserDataLoading } = useNeosyncUser(); | ||
| const { account, isLoading: isAccountLoading } = useAccount(); | ||
| const posthog = usePostHog(); | ||
|
|
||
| useEffect(() => { | ||
| if ( | ||
| isUserDataLoading || | ||
| isAccountLoading || | ||
| !account?.name || | ||
| !account?.id || | ||
| !userData?.userId | ||
| ) { | ||
| return; | ||
| } | ||
| // we only want to set the user id if auth is enabled, otherwise it is always the same | ||
| // so it makes it harder to identify unique posthog sessions when running in un-auth mode. | ||
| const userId = systemConfig.isAuthEnabled ? userData.userId : undefined; | ||
| posthog.identify(userId, { | ||
| accountName: account.name, | ||
| accountId: account.id, | ||
| }); | ||
| }, [ | ||
| isUserDataLoading, | ||
| isAccountLoading, | ||
| account?.id, | ||
| account?.name, | ||
| userData?.userId, | ||
| systemConfig?.isAuthEnabled, | ||
| ]); | ||
| return <></>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
3c868bfThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
neosync-marketing – ./marketing
neosync-marketing-neosync.vercel.app
www.neosync.dev
neosync-marketing-app.vercel.app
neosync-marketing-git-main-neosync.vercel.app
neosync.dev