From 0c64580abf672331270c75ba6f82f89d5c882794 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 17 Sep 2024 14:00:23 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=88(frontend)=20track=20page=20view=20?=
 =?UTF-8?q?events=20in=20SPA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implement page view tracking in the SPA following PostHog’s guidelines.
Manually capture page's location when it changes.
---
 src/frontend/src/App.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx
index 49529926..b049e0b7 100644
--- a/src/frontend/src/App.tsx
+++ b/src/frontend/src/App.tsx
@@ -1,11 +1,11 @@
 import '@livekit/components-styles'
 import '@/styles/index.css'
-import { Suspense } from 'react'
+import { Suspense, useEffect } from 'react'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { QueryClientProvider } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useLang } from 'hoofd'
-import { Switch, Route } from 'wouter'
+import { Switch, Route, useLocation } from 'wouter'
 import { I18nProvider } from 'react-aria-components'
 import { Layout } from './layout/Layout'
 import { NotFoundScreen } from './components/NotFoundScreen'
@@ -17,6 +17,7 @@ import posthog from 'posthog-js'
 
 function App() {
   const { i18n } = useTranslation()
+  const [location] = useLocation()
   useLang(i18n.language)
 
   const isProduction = import.meta.env.PROD
@@ -31,6 +32,10 @@ function App() {
     })
   }
 
+  useEffect(() => {
+    posthog.capture('$pageview')
+  }, [location])
+
   return (
     <QueryClientProvider client={queryClient}>
       <Suspense fallback={null}>