Add posthog (#23)

* feat: init posthog * chore(env): add posthog env variables * feat(analytics/posthog): capture events * chore: enable corepack --------- Co-authored-by: withyellow <[email protected]>
zolplay-cn · Nov 2, 2023 · 95ab568 · 95ab568
1 parent e4f0f46
commit 95ab568
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 88 deletions.
diff --git a/.env.example b/.env.example
@@ -22,3 +22,6 @@ NEXT_PUBLIC_UPLOAD_API_KEY=
 CAREERS_WEBHOOK_URL=
 CONTACT_WEBHOOK_URL=
 NEXT_PUBLIC_OG_URL=
+
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=
diff --git a/app/PostHogProvider.tsx b/app/PostHogProvider.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+import { useEffect } from 'react'
+
+if (typeof window !== 'undefined' && process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+  })
+}
+
+export function PostHogPageview() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  // Track pageviews
+  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 <></>
+}
+
+export function PHProvider({ children }: { children: React.ReactNode }) {
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
+}
diff --git a/app/[locale]/careers/Careers.tsx b/app/[locale]/careers/Careers.tsx
@@ -13,6 +13,7 @@ import { cva } from 'class-variance-authority'
 import { AnimatePresence, motion } from 'framer-motion'
 import { Link, useTranslations } from 'next-intl'
 import Image from 'next/image'
+import { usePostHog } from 'posthog-js/react'
 import React from 'react'
 import { useForm } from 'react-hook-form'
 import { BsFileEarmarkPdf } from 'react-icons/bs'
@@ -36,6 +37,7 @@ function makeJobLink(job: Job) {
 }
 
 export function Careers({ jobs }: { jobs: Job[] }) {
+  const posthog = usePostHog()
   const t = useTranslations('Careers')
 
   // extract mapper with squad.slug as keys and squad.title as values
@@ -76,7 +78,12 @@ export function Careers({ jobs }: { jobs: Job[] }) {
       <h1>{t.rich('Heading')}</h1>
       <p>{t.rich('Intro')}</p>
 
-      <ButtonLink href="#positions">
+      <ButtonLink
+        href="#positions"
+        onClick={() => {
+          posthog?.capture('click_see_all_cta')
+        }}
+      >
         {t('SeeAllCTA')}&nbsp;
         <TbArrowRight />
       </ButtonLink>

diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -1,5 +1,8 @@
+import type { Metadata } from 'next'
+import { Manrope } from 'next/font/google'
+import { notFound } from 'next/navigation'
+import { Suspense } from 'react'
 import 'tailwindcss/tailwind.css'
-import '~/app/globals.css'
 import { AnalyticsWrapper } from '~/app/Analytics'
 import { Background } from '~/app/Background'
 import { Footer } from '~/app/Footer'
@@ -8,12 +11,14 @@ import { Rulers } from '~/app/Rulers'
 import { Sidebar } from '~/app/Sidebar'
 import { ThemeProvider } from '~/app/ThemeProvider'
 import { Toasts } from '~/app/Toasts'
+import '~/app/globals.css'
 import { i18n } from '~/i18n'
 import { getMessages } from '~/i18n.server'
 import { getOpenGraphImage } from '~/lib/helper'
-import type { Metadata } from 'next'
-import { Manrope } from 'next/font/google'
-import { notFound } from 'next/navigation'
+import {
+  PostHogPageview,
+  PHProvider as PostHogProvider,
+} from '../PostHogProvider'
 
 const fontSansEn = Manrope({
   weight: ['400', '500', '700'],
@@ -101,33 +106,39 @@ export default async function RootLayout({
       suppressHydrationWarning
       className={`font-sans ${fontSansEn.variable}`}
     >
-      <body className="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-300">
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          <IntlProvider locale={params.locale} messages={messages}>
-            <Background />
-            <main className="relative mx-2 flex min-h-screen max-w-4xl flex-col pt-12 md:mx-4 md:mt-0 md:flex-row md:pt-20 lg:mx-auto lg:pt-28">
-              <Rulers />
-              <Sidebar />
-              <section className="frosted-noise relative z-20 mt-3 flex w-full flex-auto flex-col border border-transparent bg-[#fefefe] p-5 pb-36 shadow-xl dark:border-stone-800 dark:bg-[#1a1a1a] md:mt-0 md:p-7 md:pb-36 lg:p-9 lg:pb-44">
-                <article className="prose dark:prose-invert prose-headings:tracking-tighter prose-h1:text-2xl prose-p:leading-loose prose-p:tracking-tight prose-li:tracking-tight prose-img:rounded-xl lg:prose-h1:text-4xl">
-                  {children}
-                </article>
+      <Suspense>
+        <PostHogPageview />
+      </Suspense>
+
+      <PostHogProvider>
+        <body className="bg-stone-50 text-stone-800 dark:bg-stone-900 dark:text-stone-300">
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            <IntlProvider locale={params.locale} messages={messages}>
+              <Background />
+              <main className="relative mx-2 flex min-h-screen max-w-4xl flex-col pt-12 md:mx-4 md:mt-0 md:flex-row md:pt-20 lg:mx-auto lg:pt-28">
+                <Rulers />
+                <Sidebar />
+                <section className="frosted-noise relative z-20 mt-3 flex w-full flex-auto flex-col border border-transparent bg-[#fefefe] p-5 pb-36 shadow-xl dark:border-stone-800 dark:bg-[#1a1a1a] md:mt-0 md:p-7 md:pb-36 lg:p-9 lg:pb-44">
+                  <article className="prose dark:prose-invert prose-headings:tracking-tighter prose-h1:text-2xl prose-p:leading-loose prose-p:tracking-tight prose-li:tracking-tight prose-img:rounded-xl lg:prose-h1:text-4xl">
+                    {children}
+                  </article>
 
-                <Footer />
-              </section>
-            </main>
-          </IntlProvider>
+                  <Footer />
+                </section>
+              </main>
+            </IntlProvider>
 
-          <Toasts />
-        </ThemeProvider>
+            <Toasts />
+          </ThemeProvider>
 
-        <AnalyticsWrapper />
-      </body>
+          <AnalyticsWrapper />
+        </body>
+      </PostHogProvider>
     </html>
   )
 }
diff --git a/components/members/OurMembers.tsx b/components/members/OurMembers.tsx
@@ -11,6 +11,7 @@ import { atom, useAtom } from 'jotai'
 import { useFormatter, useTranslations } from 'next-intl'
 import Image from 'next/image'
 import Link from 'next/link'
+import { usePostHog } from 'posthog-js/react'
 import React from 'react'
 import { CgWebsite } from 'react-icons/cg'
 import {
@@ -65,11 +66,17 @@ const SocialIconMap: Record<Unarray<Member['social']>['platform'], Component> =
     xiaohongshu: CgWebsite,
     website: CgWebsite,
   }
-function SocialLink({ social }: { social: Unarray<Member['social']> }) {
+function SocialLink({
+  social,
+  onClick,
+}: {
+  social: Unarray<Member['social']>
+  onClick?: () => void
+}) {
   const Icon = SocialIconMap[social.platform]
 
   return (
-    <li className="flex items-center">
+    <li className="flex items-center" onClick={onClick}>
       <Link
         href={social.url}
         target="_blank"
@@ -82,6 +89,8 @@ function SocialLink({ social }: { social: Unarray<Member['social']> }) {
 }
 
 function MemberCard({ member }: { member: Member }) {
+  const posthog = usePostHog()
+
   const { dateTime: formatDateTime } = useFormatter()
   const joined = React.useMemo(
     () =>
@@ -158,7 +167,16 @@ function MemberCard({ member }: { member: Member }) {
       {member.social && member.social.length > 0 && (
         <ul className="mb-3 flex w-full items-center justify-center gap-1.5">
           {member.social.map((social) => (
-            <SocialLink social={social} key={social._key} />
+            <SocialLink
+              social={social}
+              key={social._key}
+              onClick={() => {
+                posthog?.capture('click_social', {
+                  name: member.name,
+                  platform: social.platform,
+                })
+              }}
+            />
           ))}
         </ul>
       )}

diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "private": true,
+  "packageManager": "[email protected]",
   "scripts": {
     "build": "next build",
     "dev": "next dev --port 3333",
@@ -32,6 +33,7 @@
     "next-intl": "2.14.0-beta.4",
     "next-sanity": "^4.3.2",
     "next-themes": "^0.2.1",
+    "posthog-js": "^1.87.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",