[WEB] Track route as well as path

web/src/auth.ts

@@ -60,7 +60,7 @@ export const {
  async signIn({ user, isNewUser, account }) {
  await Promise.all([
  identify(user),
- track('Signed In', {
+ track('Signed in', {
  'First Time': !!isNewUser,
  userId: user.id,
  Provider: account?.provider

web/src/components/utils/fathom.tsx

@@ -3,6 +3,7 @@
 import { load, trackPageview } from 'fathom-client'
 import { usePathname, useSearchParams } from 'next/navigation'
 import { Suspense, useEffect } from 'react'
+import { useRoute } from 'src/hooks/use-route'
 import { track } from 'src/lib/tracking/track'
 
 const siteId =
@@ -38,14 +39,16 @@ function TrackPageView() {
 function Track() {
  const pathname = usePathname()
  const search = Object.fromEntries(useSearchParams().entries())
+ const route = useRoute()
 
  useEffect(() => {
  if (!pathname) return
  track('Viewed a page', {
  Path: pathname,
- Search: Object.keys(search).length > 0 ? search : undefined
+ Search: Object.keys(search).length > 0 ? search : undefined,
+ Route: route
  })
- }, [pathname, search])
+ }, [pathname, search, route])
 
  return null
 }

web/src/hooks/use-route.ts

@@ -0,0 +1,47 @@
+import { useParams, usePathname, useSearchParams } from 'next/navigation'
+
+// https://github.com/vercel/speed-insights/blob/main/packages/web/src/nextjs/utils.ts
+export const useRoute = (): string | null => {
+ const params = useParams()
+ const searchParams = useSearchParams()
+ const path = usePathname()
+
+ const finalParams = {
+ ...Object.fromEntries(searchParams.entries()),
+ ...(params || {})
+ }
+
+ return params ? computeRoute(path, finalParams) : path
+}
+
+function computeRoute(
+ pathname: string | null,
+ pathParams: Record<string, string | string[]> | null
+): string | null {
+ if (!pathname || !pathParams) {
+ return pathname
+ }
+
+ let result = pathname
+
+ try {
+ for (const [key, valueOrArray] of Object.entries(pathParams)) {
+ const isValueArray = Array.isArray(valueOrArray)
+ const value = isValueArray ? valueOrArray.join('/') : valueOrArray
+ const expr = isValueArray ? `...${key}` : key
+
+ const matcher = new RegExp(`/${escapeRegExp(value)}(?=[/?#]|$)`)
+ if (matcher.test(result)) {
+ result = result.replace(matcher, `/[${expr}]`)
+ }
+ }
+
+ return result
+ } catch (e) {
+ return pathname
+ }
+}
+
+function escapeRegExp(string: string): string {
+ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}

web/src/lib/tracking/events.ts

@@ -1,10 +1,10 @@
 export type TrackableEvents = {
  'Opened a modal': { Extra?: Record<string, unknown>; Modal: string }
- 'Signed In': { Provider?: string; 'First Time': boolean }
+ 'Signed in': { Provider?: string; 'First Time': boolean }
  'Pressed a button': { Button: string; Extra?: Record<string, unknown> }
  'Viewed a page': {
  Path: string
- Ref?: string | null
+ Route: string
  Search?: Record<string, unknown>
  }
 }