Skip to content

Commit a17d893

Browse files
MananTankMananTank
committed
[TOOL-3873] Fix pageview tracking in dashboard, Add posthog to playground (#6595)
1 parent 0dcde07 commit a17d893

File tree

18 files changed

+301
-132
lines changed

18 files changed

+301
-132
lines changed

‎apps/dashboard/src/app/components/root-providers.tsx‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎apps/dashboard/src/app/layout.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import NextTopLoader from "nextjs-toploader";
88
import { Suspense } from "react";
99
import { OpCreditsGrantedModalWrapperServer } from "../components/onboarding/OpCreditsGrantedModalWrapperServer";
1010
import { PosthogIdentifierServer } from "../components/wallets/PosthogIdentifierServer";
11+
import { PHProvider } from "../lib/posthog/Posthog";
12+
import { PosthogHeadSetup } from "../lib/posthog/PosthogHeadSetup";
13+
import { PostHogPageView } from "../lib/posthog/PosthogPageView";
1114
import { EnsureValidConnectedWalletLoginServer } from "./components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
12-
import { PostHogProvider } from "./components/root-providers";
1315
import { AppRouterProviders } from "./providers";
1416

1517
const fontSans = Inter({
@@ -63,8 +65,10 @@ export default function RootLayout({
6365
customDomain="https://pl.thirdweb.com"
6466
selfHosted
6567
/>
68+
<PosthogHeadSetup />
6669
</head>
67-
<PostHogProvider>
70+
<PHProvider>
71+
<PostHogPageView />
6872
<body
6973
className={cn(
7074
"bg-background font-sans antialiased",
@@ -91,7 +95,7 @@ export default function RootLayout({
9195
showSpinner={false}
9296
/>
9397
</body>
94-
</PostHogProvider>
98+
</PHProvider>
9599
</html>
96100
);
97101
}

‎apps/dashboard/src/components/wallets/PosthogIdentifier.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useThirdwebClient } from "@/constants/thirdweb.client";
4-
import posthog from "posthog-js";
4+
import { usePostHog } from "posthog-js/react";
55
import { useEffect } from "react";
66
import {
77
useActiveAccount,
@@ -32,48 +32,49 @@ export const PosthogIdentifierClient: React.FC<{
3232
client,
3333
});
3434
const wallet = useActiveWallet();
35+
const posthog = usePostHog();
3536

3637
// legitimate use-case
3738
// eslint-disable-next-line no-restricted-syntax
3839
useEffect(() => {
39-
if (wallet) {
40+
if (wallet && posthog && posthog.__loaded) {
4041
const connector = walletIdToPHName[wallet.id] || wallet.id;
4142
posthog.register({ connector });
4243
posthog.capture("wallet_connected", { connector });
4344
}
44-
}, [wallet]);
45+
}, [wallet, posthog]);
4546

4647
// legitimate use-case
4748
// eslint-disable-next-line no-restricted-syntax
4849
useEffect(() => {
49-
if (accountAddress) {
50+
if (accountAddress && posthog && posthog.__loaded) {
5051
posthog.identify(accountAddress);
5152
}
52-
}, [accountAddress]);
53+
}, [accountAddress, posthog]);
5354

5455
// eslint-disable-next-line no-restricted-syntax
5556
useEffect(() => {
56-
if (accountId) {
57+
if (accountId && posthog && posthog.__loaded) {
5758
posthog.identify(accountId);
5859
}
59-
}, [accountId]);
60+
}, [accountId, posthog]);
6061

6162
// legitimate use-case
6263
// eslint-disable-next-line no-restricted-syntax
6364
useEffect(() => {
64-
if (chain?.id) {
65+
if (chain?.id && posthog && posthog.__loaded) {
6566
posthog.unregister("network");
6667
posthog.register({ chain_id: chain?.id, ecosystem: "evm" });
6768
}
68-
}, [chain?.id]);
69+
}, [chain?.id, posthog]);
6970

7071
// legitimate use-case
7172
// eslint-disable-next-line no-restricted-syntax
7273
useEffect(() => {
73-
if (balance?.data?.displayValue) {
74+
if (balance?.data?.displayValue && posthog && posthog.__loaded) {
7475
posthog.register({ balance: balance.data.displayValue });
7576
}
76-
}, [balance]);
77+
}, [balance, posthog]);
7778

7879
return null;
7980
};

‎apps/dashboard/src/lib/posthog/Posthog.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
"use client";
2+
3+
import { isProd } from "@/constants/env";
4+
import posthog from "posthog-js";
5+
import { PostHogProvider } from "posthog-js/react";
6+
import { useEffect } from "react";
7+
8+
const NEXT_PUBLIC_POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
9+
10+
export function PHProvider({
11+
children,
12+
}: {
13+
children: React.ReactNode;
14+
}) {
15+
// eslint-disable-next-line no-restricted-syntax
16+
useEffect(() => {
17+
if (NEXT_PUBLIC_POSTHOG_API_KEY && isProd) {
18+
posthog.init(NEXT_PUBLIC_POSTHOG_API_KEY, {
19+
api_host: "https://a.thirdweb.com",
20+
capture_pageview: false,
21+
debug: false,
22+
disable_session_recording: true,
23+
});
24+
}
25+
}, []);
26+
27+
return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
28+
}

‎apps/dashboard/src/lib/posthog/PosthogHeadSetup.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
const posthogHost = "https://a.thirdweb.com";
2+
3+
export function PosthogHeadSetup() {
4+
return (
5+
<>
6+
<link rel="preconnect" href={posthogHost} />
7+
<link rel="dns-prefetch" href={posthogHost} />
8+
</>
9+
);
10+
}

‎apps/dashboard/src/lib/posthog/PosthogPageView.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
"use client";
2+
3+
import { usePathname, useSearchParams } from "next/navigation";
4+
import { usePostHog } from "posthog-js/react";
5+
import { Suspense, useEffect } from "react";
6+
7+
function PostHogPageViewInner() {
8+
const pathname = usePathname();
9+
const searchParams = useSearchParams();
10+
const posthog = usePostHog();
11+
12+
// eslint-disable-next-line no-restricted-syntax
13+
useEffect(() => {
14+
if (pathname && posthog) {
15+
let url = window.origin + pathname;
16+
if (searchParams.toString()) {
17+
url = `${url}?${searchParams.toString()}`;
18+
}
19+
posthog.capture("$pageview", {
20+
$current_url: url,
21+
});
22+
}
23+
}, [pathname, searchParams, posthog]);
24+
25+
return null;
26+
}
27+
28+
export function PostHogPageView() {
29+
return (
30+
<Suspense fallback={null}>
31+
<PostHogPageViewInner />
32+
</Suspense>
33+
);
34+
}

‎apps/playground-web/next.config.mjs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const ContentSecurityPolicy = `
66
style-src 'self' 'unsafe-inline';
77
font-src 'self';
88
frame-src * data:;
9-
script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
9+
script-src 'self' 'unsafe-eval' 'unsafe-inline' 'wasm-unsafe-eval' 'inline-speculation-rules' *.thirdweb.com thirdweb.com *.thirdweb-dev.com vercel.live js.stripe.com;
1010
connect-src * data: blob:;
1111
worker-src 'self' blob:;
1212
block-all-mixed-content;

‎apps/playground-web/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
"next-themes": "^0.4.6",
4242
"nextjs-toploader": "^1.6.12",
4343
"openapi-types": "^12.1.3",
44+
"posthog-js": "1.67.1",
4445
"prettier": "3.5.3",
4546
"react": "19.0.0",
4647
"react-dom": "19.0.0",

‎apps/playground-web/src/app/layout.tsx‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import { AppSidebar } from "./AppSidebar";
77
import { Providers } from "./providers";
88
import "./globals.css";
99
import NextTopLoader from "nextjs-toploader";
10+
import { PHProvider } from "../lib/posthog/Posthog";
11+
import { PosthogHeadSetup } from "../lib/posthog/PosthogHeadSetup";
12+
import { PostHogPageView } from "../lib/posthog/PosthogPageView";
1013
import { MobileHeader } from "./MobileHeader";
1114
import { getSidebarLinks } from "./navLinks";
1215

@@ -43,31 +46,35 @@ export default async function RootLayout({
4346
data-domain="playground.thirdweb.com"
4447
data-api="https://pl.thirdweb.com/api/event"
4548
/>
49+
<PosthogHeadSetup />
4650
</head>
4751

48-
<body
49-
className={cn(
50-
"bg-background font-sans antialiased ",
51-
sansFont.variable,
52-
monoFont.variable,
53-
)}
54-
>
55-
<NextTopLoader
56-
color="hsl(var(--foreground))"
57-
height={2}
58-
shadow={false}
59-
showSpinner={false}
60-
/>
61-
<MobileHeader links={sidebarLinks} />
62-
<div className="flex flex-col lg:h-dvh lg:flex-row">
63-
<AppSidebar links={sidebarLinks} />
64-
<div className="flex grow flex-col lg:overflow-auto">
65-
<div className="container relative grow px-4 md:px-6">
66-
<Providers>{children}</Providers>
52+
<PHProvider>
53+
<PostHogPageView />
54+
<body
55+
className={cn(
56+
"bg-background font-sans antialiased ",
57+
sansFont.variable,
58+
monoFont.variable,
59+
)}
60+
>
61+
<NextTopLoader
62+
color="hsl(var(--foreground))"
63+
height={2}
64+
shadow={false}
65+
showSpinner={false}
66+
/>
67+
<MobileHeader links={sidebarLinks} />
68+
<div className="flex flex-col lg:h-dvh lg:flex-row">
69+
<AppSidebar links={sidebarLinks} />
70+
<div className="flex grow flex-col lg:overflow-auto">
71+
<div className="container relative grow px-4 md:px-6">
72+
<Providers>{children}</Providers>
73+
</div>
6774
</div>
6875
</div>
69-
</div>
70-
</body>
76+
</body>
77+
</PHProvider>
7178
</html>
7279
);
7380
}

‎apps/playground-web/src/lib/posthog/Posthog.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use client";
2+
3+
import posthog from "posthog-js";
4+
import { PostHogProvider } from "posthog-js/react";
5+
import { useEffect } from "react";
6+
import { isProd } from "../env";
7+
8+
const NEXT_PUBLIC_POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY;
9+
10+
export function PHProvider({
11+
children,
12+
}: {
13+
children: React.ReactNode;
14+
}) {
15+
useEffect(() => {
16+
if (NEXT_PUBLIC_POSTHOG_API_KEY && isProd) {
17+
posthog.init(NEXT_PUBLIC_POSTHOG_API_KEY, {
18+
api_host: "https://a.thirdweb.com",
19+
capture_pageview: false,
20+
debug: false,
21+
disable_session_recording: true,
22+
});
23+
}
24+
}, []);
25+
26+
return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
27+
}

0 commit comments

Comments
 (0)