Improve tracking: add user ID, etc.

web/components/nav/sidebar-item.tsx

@@ -24,8 +24,8 @@ export function SidebarItem(props: { item: Item; currentPage?: string }) {
     item.href != null && currentBasePath === item.href.split('?')[0]
 
   const onClick = () => {
-    track('sidebar: ' + item.name)
     item.onClick?.()
+    track('sidebar: ' + item.name)
   }
 
   const sidebarClass = clsx(

web/components/page-base.tsx

@@ -30,7 +30,7 @@ import {MdThumbUp} from "react-icons/md"
 import {FaEnvelope} from "react-icons/fa"
 
 export function PageBase(props: {
-  trackPageView: string | false
+  trackPageView?: string | false
   trackPageProps?: Record<string, any>
   className?: string
   children?: ReactNode

web/components/profile-grid.tsx

@@ -2,7 +2,6 @@ import {Profile} from 'common/profiles/profile'
 import {CompatibilityScore} from 'common/profiles/compatibility-score'
 import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
 import {LoadMoreUntilNotVisible} from 'web/components/widgets/visibility-observer'
-import {track} from 'web/lib/service/analytics'
 import {Col} from './layout/col'
 import clsx from 'clsx'
 import {JSONContent} from "@tiptap/core";
@@ -122,7 +121,7 @@ function ProfilePreview(props: {
 
   return (
     <Link
-      onClick={() => track('click profile preview')}
+      // onClick={() => track('click profile preview')}
       href={`/${user.username}`}
       className="cursor-pointer group block rounded-lg overflow-hidden bg-transparent hover:bg-gray-50 dark:hover:bg-gray-800/50 h-full border border-canvas-300"
     >

web/hooks/use-tracking.ts

@@ -1,7 +1,7 @@
-import { useEffect } from 'react'
-import { track } from 'web/lib/service/analytics'
-import { inIframe } from './use-is-iframe'
-import { useIsAuthorized } from './use-user'
+import {useEffect} from 'react'
+import {track} from 'web/lib/service/analytics'
+import {inIframe} from './use-is-iframe'
+import {useIsAuthorized, useUser} from './use-user'
 
 export const useTracking = (
   eventName: string,
@@ -10,9 +10,10 @@ export const useTracking = (
   extraDeps?: any[]
 ) => {
   const isAuthed = useIsAuthorized()
+  const user = useUser()
   useEffect(() => {
     if (isAuthed === undefined) return
     if (excludeIframe && inIframe()) return
-    track(eventName, eventProperties)
+    track(eventName, {...eventProperties, userId: user?.id})
   }, [isAuthed, eventName, excludeIframe, ...(extraDeps ?? [])])
 }

web/lib/service/analytics.ts

@@ -1,24 +1,25 @@
 // eslint-disable-next-line no-restricted-imports
-import { ENV_CONFIG } from 'common/envs/constants'
-import { db } from 'web/lib/supabase/db'
-import { removeUndefinedProps } from 'common/util/object'
-import { run, SupabaseClient } from 'common/supabase/utils'
-import { Json } from 'common/supabase/schema'
+import {ENV_CONFIG} from 'common/envs/constants'
+import {db} from 'web/lib/supabase/db'
+import {removeUndefinedProps} from 'common/util/object'
+import {run, SupabaseClient} from 'common/supabase/utils'
+import {Json} from 'common/supabase/schema'
 import posthog from 'posthog-js'
 
 type EventIds = {
   contractId?: string | null
   commentId?: string | null
+  userId?: string | null
   adId?: string | null
 }
 
 type EventData = Record<string, Json | undefined>
 
 export async function track(name: string, properties?: EventIds & EventData) {
-  const { commentId, ...data } = properties || {}
+  const {commentId, userId, ...data} = properties || {}
   try {
     posthog?.capture(name, data)
-    await insertUserEvent(name, data, db, null, commentId)
+    await insertUserEvent(name, data, db, userId, commentId)
     // console.debug('result', result)
   } catch (e) {
     console.error('error tracking event:', e)
@@ -57,8 +58,8 @@ export const withTracking =
   ) =>
   async () => {
     const promise = f()
-    track(eventName, eventProperties)
     await promise
+    track(eventName, eventProperties)
   }
 
 function insertUserEvent(
@@ -73,7 +74,7 @@ function insertUserEvent(
     db.from('user_events').insert({
       name,
       data: removeUndefinedProps(data) as Record<string, Json>,
-      // user_id: userId,
+      user_id: userId,
       comment_id: commentId,
     })
   )