mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
[Docs] posthog Integration (#761)
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Integrates PostHog for page view tracking in the documentation site
with necessary rewrites and components.
>
> - **Integration**:
> - Adds PostHog integration to track page views in `layout.tsx` using
`PostHogPageView` and `CSPostHogProvider`.
> - Adds `posthog-js` to `package.json` dependencies.
> - **Rewrites**:
> - Adds proxy rewrites in `next.config.mjs` to prevent ad blockers from
blocking PostHog requests.
> - **Components**:
> - Creates `PostHogPageView` in `pageview.tsx` and
`pageview-dynamic.tsx` to capture page views.
> - Implements `CSPostHogProvider` in `posthog-provider.tsx` to
initialize PostHog with specific settings.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 5551f4ffc4. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
<!-- ELLIPSIS_HIDDEN -->
This commit is contained in:
parent
292c411844
commit
c93086c379
@ -26,6 +26,19 @@ const config = {
|
||||
},
|
||||
async rewrites() {
|
||||
return [
|
||||
// PostHog proxy rewrites to prevent ad blockers
|
||||
{
|
||||
source: "/consume/static/:path*",
|
||||
destination: "https://eu-assets.i.posthog.com/static/:path*",
|
||||
},
|
||||
{
|
||||
source: "/consume/:path*",
|
||||
destination: "https://eu.i.posthog.com/:path*",
|
||||
},
|
||||
{
|
||||
source: "/consume/decide",
|
||||
destination: "https://eu.i.posthog.com/decide",
|
||||
},
|
||||
// Redirect .mdx requests to the llms.mdx route handler
|
||||
{
|
||||
source: '/docs/:path*.mdx',
|
||||
|
||||
@ -43,6 +43,7 @@
|
||||
"minimatch": "^10.0.1",
|
||||
"next": "15.3.2",
|
||||
"next-themes": "^0.4.6",
|
||||
"posthog-js": "^1.235.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-remove-scroll": "^2.7.0",
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
import { StackProvider, StackTheme } from '@stackframe/stack';
|
||||
import { RootProvider } from 'fumadocs-ui/provider';
|
||||
import { Inter } from 'next/font/google';
|
||||
import PostHogPageView from '../components/pageview';
|
||||
import { CSPostHogProvider } from '../components/posthog-provider';
|
||||
import { stackServerApp } from '../stack';
|
||||
import './global.css';
|
||||
|
||||
@ -14,17 +16,20 @@ export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
<head>
|
||||
</head>
|
||||
<body className="flex flex-col min-h-screen">
|
||||
<StackProvider app={stackServerApp}>
|
||||
<StackTheme>
|
||||
<RootProvider
|
||||
search={{
|
||||
enabled: false, // Completely disable fumadocs search
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RootProvider>
|
||||
</StackTheme>
|
||||
</StackProvider>
|
||||
<CSPostHogProvider>
|
||||
<PostHogPageView />
|
||||
<StackProvider app={stackServerApp}>
|
||||
<StackTheme>
|
||||
<RootProvider
|
||||
search={{
|
||||
enabled: false, // Completely disable fumadocs search
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</RootProvider>
|
||||
</StackTheme>
|
||||
</StackProvider>
|
||||
</CSPostHogProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
27
docs/src/components/pageview-dynamic.tsx
Normal file
27
docs/src/components/pageview-dynamic.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
'use client';
|
||||
|
||||
import { usePathname, useSearchParams } from "next/navigation";
|
||||
import { usePostHog } from 'posthog-js/react';
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function PostHogPageView(): null {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const posthog = usePostHog();
|
||||
useEffect(() => {
|
||||
if (pathname) {
|
||||
let url = window.origin + pathname;
|
||||
if (searchParams.toString()) {
|
||||
url = url + `?${searchParams.toString()}`;
|
||||
}
|
||||
posthog.capture(
|
||||
'$pageview',
|
||||
{
|
||||
'$current_url': url,
|
||||
}
|
||||
);
|
||||
}
|
||||
}, [pathname, searchParams, posthog]);
|
||||
|
||||
return null;
|
||||
}
|
||||
9
docs/src/components/pageview.tsx
Normal file
9
docs/src/components/pageview.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const PageView = dynamic(() => import('./pageview-dynamic'), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
export default PageView;
|
||||
24
docs/src/components/posthog-provider.tsx
Normal file
24
docs/src/components/posthog-provider.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
'use client';
|
||||
|
||||
import posthog from 'posthog-js';
|
||||
import { PostHogProvider } from 'posthog-js/react';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
export function CSPostHogProvider({ children }: { children: React.ReactNode }) {
|
||||
useEffect(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const postHogKey = "phc_vIUFi0HzHo7oV26OsaZbUASqxvs8qOmap1UBYAutU4k";
|
||||
if (postHogKey.length > 5) {
|
||||
posthog.init(postHogKey, {
|
||||
api_host: "/consume",
|
||||
ui_host: "https://eu.i.posthog.com",
|
||||
capture_pageview: false,
|
||||
capture_pageleave: true,
|
||||
person_profiles: 'identified_only'
|
||||
});
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
|
||||
}
|
||||
988
pnpm-lock.yaml
988
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user