add posthog analytics

SkidGod4444 · Nov 13, 2024 · e90daad · e90daad
1 parent 4abf68a
commit e90daad
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 0 deletions.
diff --git a/apps/app/app/layout.tsx b/apps/app/app/layout.tsx
@@ -7,6 +7,7 @@ import { AppSidebar } from "@/components/custom/sidebar/sidebar";
 import { cookies } from "next/headers";
 import Infobar from "@/components/custom/infobar/infobar";
 import ProgressBar from "@/components/custom/progress.bar";
+import { PosthogProvider } from "@/hooks/posthog";
 
 export const metadata: Metadata = {
   title: "Plura",
@@ -23,6 +24,7 @@ async function RootLayout({
 
   return (
     <html lang="en" suppressHydrationWarning>
+      <PosthogProvider>
       <body
         className={`min-h-screen bg-background font-sans ${GeistSans.variable} antialiased`}
       >
@@ -42,6 +44,7 @@ async function RootLayout({
           </SidebarProvider>
         </ThemeProvider>
       </body>
+      </PosthogProvider>
     </html>
   );
 }

diff --git a/apps/app/hooks/posthog.tsx b/apps/app/hooks/posthog.tsx
@@ -0,0 +1,17 @@
+'use client'
+import posthog from 'posthog-js'
+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
+  })
+}
+export function PosthogProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { GeistSans } from "geist/font/sans";
 import "./globals.css";
 import { ThemeProvider } from "@/hooks/theme-provider";
+import { PosthogProvider } from "@/hooks/posthog";
 
 export const metadata: Metadata = {
   title: "Plura",
@@ -15,6 +16,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <PosthogProvider>
       <body
         className={` bg-background font-sans min-h-screen  ${GeistSans.variable} antialiased`}
       >
@@ -29,6 +31,7 @@ export default function RootLayout({
           </div>
         </ThemeProvider>
       </body>
+      </PosthogProvider>
     </html>
   );
 }
diff --git a/apps/www/hooks/posthog.tsx b/apps/www/hooks/posthog.tsx
@@ -0,0 +1,17 @@
+'use client'
+import posthog from 'posthog-js'
+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
+  })
+}
+export function PosthogProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+    return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "next": "15.0.2",
     "next-auth": "5.0.0-beta.25",
     "postcss": "^8",
+    "posthog-js": "^1.184.1",
     "supertest": "^7.0.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml