diff --git a/.env.example b/.env.example
index 275ddd4..ddaada4 100644
--- 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/Analytics.tsx b/app/Analytics.tsx
deleted file mode 100644
index 72c823b..0000000
--- a/app/Analytics.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-'use client'
-
-import { Analytics } from '@vercel/analytics/react'
-
-export function AnalyticsWrapper() {
- return
-}
diff --git a/app/PostHogProvider.tsx b/app/PostHogProvider.tsx
new file mode 100644
index 0000000..0bdafbc
--- /dev/null
+++ 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 {children}
+}
diff --git a/app/[locale]/careers/Careers.tsx b/app/[locale]/careers/Careers.tsx
index 37977e8..4356034 100644
--- 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[] }) {
{t.rich('Heading')}
{t.rich('Intro')}
-
+ {
+ posthog?.capture('click_see_all_cta')
+ }}
+ >
{t('SeeAllCTA')}
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index 26b0af3..14500c1 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -1,8 +1,11 @@
+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'
+import '~/app/globals.css'
import IntlProvider from '~/app/IntlProvider'
import { Rulers } from '~/app/Rulers'
import { Sidebar } from '~/app/Sidebar'
@@ -11,9 +14,10 @@ import { Toasts } from '~/app/Toasts'
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 +105,37 @@ export default async function RootLayout({
suppressHydrationWarning
className={`font-sans ${fontSansEn.variable}`}
>
-
-
-
-
-
-
-
-
-
- {children}
-
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+