[WEB] Track page views to Mixpanel

web/src/app/api/auth/[...nextauth]/route.ts

@@ -1 +1,11 @@
 export { GET, POST } from 'src/auth'
+
+// export async function GET(request: NextRequest) {
+//   console.log(request.nextUrl.pathname)
+//   const res = await authGet(request)
+//
+//   if (!request.nextUrl.pathname.startsWith('/api/auth/callback/')) return res
+//
+//   console.log(res)
+//   return res
+// }

web/src/auth.ts

@@ -6,6 +6,7 @@ import { appUrl } from '@books-about-food/shared/utils/app-url'
 import { getEnv } from '@books-about-food/shared/utils/get-env'
 import NextAuth, { NextAuthConfig } from 'next-auth'
 import GoogleProvider from 'next-auth/providers/google'
+import { identify } from './lib/tracking/identify'
 
 export const authOptions = {
   providers: [
@@ -95,6 +96,11 @@ export const authOptions = {
     signIn: '/auth/sign-in',
     signOut: '/account',
     error: '/auth/sign-in'
+  },
+  events: {
+    async signIn({ user }) {
+      await identify(user)
+    }
   }
 } satisfies NextAuthConfig
 

web/src/lib/tracking/events.ts

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

web/src/lib/tracking/identify.ts

@@ -0,0 +1,25 @@
+import { User } from 'next-auth'
+
+import { token, trackingEnabled } from './utils'
+
+export const identify = async ({ id, name, email, image }: User) => {
+  if (!trackingEnabled) return
+  if (!token) return
+
+  const body = {
+    $token: token,
+    $distinct_id: id,
+    $ip: 0,
+    $set: {
+      $name: name,
+      $email: email,
+      $avatar: image
+    }
+  }
+
+  await fetch(`https://api.mixpanel.com/engage#profile-set?ip=0`, {
+    method: 'POST',
+    body: JSON.stringify([body]),
+    headers: { 'content-type': 'application/json', accept: 'text/plain' }
+  })
+}

web/src/lib/tracking/track.ts

@@ -0,0 +1,81 @@
+'use server'
+
+import { cookies, headers } from 'next/headers'
+import { NextRequest, NextResponse, userAgent } from 'next/server'
+
+import { ResponseCookies } from 'next/dist/compiled/@edge-runtime/cookies'
+import { TrackableEvents } from './events'
+import { token, trackingEnabled } from './utils'
+
+type CommonEventProperties = {
+  $browser?: string
+  $device?: string
+  $os?: string
+  $referrer?: string | null
+  ip?: string | null
+}
+
+export async function track<T extends keyof TrackableEvents>(
+  userId: string | undefined,
+  event: T,
+  properties: TrackableEvents[T],
+  req?: NextRequest,
+  res?: NextResponse
+) {
+  if (!trackingEnabled) return
+  if (!token) return
+
+  const distinct_id =
+    userId ||
+    req?.cookies.get('baf-session-id')?.value ||
+    generateAnonymousId(res?.cookies)
+
+  const body = {
+    event,
+    properties: {
+      ...getCommonProperties(req),
+      ...properties,
+      distinct_id,
+      token
+    }
+  }
+
+  await fetch(`https://api.mixpanel.com/track?ip=0`, {
+    method: 'POST',
+    body: JSON.stringify([body]),
+    headers: { 'content-type': 'application/json', accept: 'text/plain' }
+  })
+}
+
+function getCommonProperties(req?: NextRequest): CommonEventProperties {
+  try {
+    const h = req?.headers || headers()
+    const ua = userAgent({ headers: h })
+
+    return {
+      $browser: ua.browser.name,
+      $device: ua.device.type,
+      $os: ua.os.name,
+      $referrer: h.get('referer'),
+      ip:
+        h.get('cf-connecting-ip') ||
+        req?.ip ||
+        h.get('x-real-ip') ||
+        h.get('x-forwarded-for')
+    }
+  } catch (e) {
+    return {}
+  }
+}
+
+function generateAnonymousId(c: ResponseCookies = cookies()) {
+  const anonId = crypto.randomUUID()
+  c.set({
+    name: 'baf-session-id',
+    value: anonId,
+    maxAge: 60 * 60 * 24 * 365,
+    secure: true,
+    httpOnly: true
+  })
+  return anonId
+}

web/src/lib/tracking/utils.ts

@@ -0,0 +1,5 @@
+export const trackingEnabled =
+  process.env.NODE_ENV !== 'development' ||
+  process.env.ENABLE_TRACKING_IN_DEV === 'true'
+
+export const token = process.env.MIXPANEL_TOKEN

web/src/middleware.ts

@@ -1,13 +1,14 @@
 import { NextResponse } from 'next/server'
 import { auth } from './auth'
+import { track } from './lib/tracking/track'
 
 const protectedPath = (pathname: string) =>
   ['/account', '/edit'].some((path) => pathname.startsWith(path))
 
 const systemPath = (pathname: string) =>
   ['/api', '/_next', '/auth'].some((path) => pathname.startsWith(path))
 
-export default auth(function middleware(request) {
+export default auth(async function middleware(request) {
   if (request.method === 'POST' || systemPath(request.nextUrl.pathname)) {
     return NextResponse.next()
   }
@@ -21,6 +22,21 @@ export default auth(function middleware(request) {
       status: 307
     })
   }
+
+  const response = NextResponse.next()
+
+  await track(
+    user?.id,
+    'Viewed a page',
+    {
+      Path: request.nextUrl.pathname,
+      Ref: request.nextUrl.searchParams.get('ref')
+    },
+    request,
+    response
+  )
+
+  return response
 })
 
 export const config = {