From df48b3e6d55afe0589e8bb5befad207762706a74 Mon Sep 17 00:00:00 2001
From: xiften <108333567+not-ani@users.noreply.github.com>
Date: Wed, 20 Nov 2024 09:30:50 -0700
Subject: [PATCH] fix(website): posthog analytics
---
apps/website/src/app/_analytics/capture.tsx | 26 +++++++++++++++++++++
apps/website/src/app/layout.tsx | 14 ++++++++---
apps/website/src/app/provides/posthog.tsx | 5 +++-
3 files changed, 41 insertions(+), 4 deletions(-)
create mode 100644 apps/website/src/app/_analytics/capture.tsx
diff --git a/apps/website/src/app/_analytics/capture.tsx b/apps/website/src/app/_analytics/capture.tsx
new file mode 100644
index 0000000..02ce1c6
--- /dev/null
+++ b/apps/website/src/app/_analytics/capture.tsx
@@ -0,0 +1,26 @@
+// app/PostHogPageView.jsx
+"use client";
+
+import { useEffect } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { usePostHog } from "posthog-js/react";
+
+export default function PostHogPageView() {
+ const pathname = usePathname();
+ const searchParams = useSearchParams();
+ const posthog = usePostHog();
+ useEffect(() => {
+ // Track pageviews
+ 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;
+}
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
index 171fabc..70c47de 100644
--- a/apps/website/src/app/layout.tsx
+++ b/apps/website/src/app/layout.tsx
@@ -1,6 +1,7 @@
import "~/app/globals.css";
import type { Metadata } from "next";
+import dynamic from "next/dynamic";
import { GeistSans } from "geist/font/sans";
import { CSPostHogProvider } from "./provides/posthog";
@@ -69,6 +70,10 @@ export const metadata: Metadata = {
],
};
+const PostHogPageView = dynamic(() => import("./_analytics/capture"), {
+ ssr: false,
+});
+
export default function RootLayout({
children,
}: Readonly<{
@@ -76,9 +81,12 @@ export default function RootLayout({
}>) {
return (
-
- {children}
-
+
+
+
+ {children}
+
+
);
}
diff --git a/apps/website/src/app/provides/posthog.tsx b/apps/website/src/app/provides/posthog.tsx
index 0c9f1c5..ac3f516 100644
--- a/apps/website/src/app/provides/posthog.tsx
+++ b/apps/website/src/app/provides/posthog.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-properties */
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
//@ts-nocheck
"use client";
@@ -7,7 +9,8 @@ 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,
- person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+ person_profiles: "anonymous", // or 'always' to create profiles for anonymous users as well
+ capture_pageleave: true, // Enable pageleave capture
});
}
export function CSPostHogProvider({ children }: { children: React.ReactNode }) {