Merge pull request #13 from Retsomm/dev

Retsomm · web-flow · commit 385614e07f19 · 2026-05-20T19:05:21.000+08:00
新增分析功能以追蹤語言選擇和課程進度，並優化用戶識別邏輯
diff --git a/app/LanguageSelection.tsx b/app/LanguageSelection.tsx
@@ -1,11 +1,11 @@
 import { images } from "@/constants/images";
 import { defaultLanguageId, languages } from "@/data/languages";
+import { captureLanguageSelected } from "@/lib/analytics";
 import { useLanguageStore } from "@/store/UseLanguageStore";
 import type { SupportedLanguage } from "@/types/learning";
 import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useMemo, useState } from "react";
-import { usePostHog } from "posthog-react-native";
 import {
   Image,
   Pressable,
@@ -21,7 +21,6 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
 export default function LanguageSelectionScreen() {
   const insets = useSafeAreaInsets();
   const { width } = useWindowDimensions();
-  const posthog = usePostHog();
   const persistedLanguageId = useLanguageStore((state) => state.selectedLanguageId);
   const setSelectedLanguage = useLanguageStore(
     (state) => state.setSelectedLanguageId,
@@ -65,10 +64,7 @@ export default function LanguageSelectionScreen() {
       return;
     }
 
-    posthog.capture("language_confirmed", { languageId: selectedLanguage.id });
-    await posthog.flush().catch((flushError) => {
-      console.error("Failed to flush language confirmation event", flushError);
-    });
+    captureLanguageSelected(selectedLanguage);
     setSelectedLanguage(selectedLanguage.id);
     router.replace("/");
   };
@@ -136,10 +132,7 @@ export default function LanguageSelectionScreen() {
               key={language.id}
               isSelected={language.id === selectedLanguageId}
               language={language}
-              onPress={() => {
-                posthog.capture("language_selected", { languageId: language.id });
-                setSelectedLanguageId(language.id);
-              }}
+              onPress={() => setSelectedLanguageId(language.id)}
             />
           ))}
         </View>
diff --git a/app/_layout.tsx b/app/_layout.tsx
@@ -1,14 +1,16 @@
 import "../global.css";
 
-import { ClerkProvider } from "@clerk/expo";
+import { ClerkProvider, useAuth } from "@clerk/expo";
 import { tokenCache } from "@clerk/expo/token-cache";
 import { useFonts } from "expo-font";
 import { Stack, useGlobalSearchParams, usePathname } from "expo-router";
 import * as SplashScreen from "expo-splash-screen";
 import * as WebBrowser from "expo-web-browser";
 import { useEffect, useRef } from "react";
 import { PostHogProvider } from "posthog-react-native";
+import { identifyPostHogUser } from "@/lib/analytics";
 import { posthog } from "@/lib/posthog";
+import { useLanguageStore } from "@/store/UseLanguageStore";
 
 SplashScreen.preventAutoHideAsync();
 WebBrowser.maybeCompleteAuthSession();
@@ -33,6 +35,33 @@ function getSafeSearchParams(params: Record<string, unknown>) {
   );
 }
 
+function PostHogUserIdentifier() {
+  const { isLoaded, isSignedIn, userId } = useAuth();
+  const selectedLanguageId = useLanguageStore((state) => state.selectedLanguageId);
+  const lastIdentifySignature = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!isLoaded || !isSignedIn || !userId) {
+      lastIdentifySignature.current = null;
+      return;
+    }
+
+    const identifySignature = `${userId}:${selectedLanguageId ?? "none"}`;
+
+    if (lastIdentifySignature.current === identifySignature) {
+      return;
+    }
+
+    lastIdentifySignature.current = identifySignature;
+    identifyPostHogUser({
+      preferredLanguageId: selectedLanguageId,
+      userId,
+    });
+  }, [isLoaded, isSignedIn, selectedLanguageId, userId]);
+
+  return null;
+}
+
 export default function RootLayout() {
   const [loaded, error] = useFonts({
     "Poppins-Regular": require("./assets/fonts/Poppins-Regular.ttf"),
@@ -91,6 +120,7 @@ export default function RootLayout() {
       }}
     >
       <ClerkProvider publishableKey={clerkPublishableKey} tokenCache={tokenCache}>
+        <PostHogUserIdentifier />
         <Stack screenOptions={{ headerShown: false }} />
       </ClerkProvider>
     </PostHogProvider>
diff --git a/app/lesson/[lessonId].tsx b/app/lesson/[lessonId].tsx
@@ -1,13 +1,48 @@
 import { AudioTeacherSession } from "@/components/audio-teacher-session";
+import { languages } from "@/data/languages";
 import { lessons } from "@/data/lessons";
+import { captureLessonAbandoned, captureLessonStarted } from "@/lib/analytics";
 import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useRef } from "react";
 import { Pressable, StyleSheet, Text, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export default function LessonDetailScreen() {
   const insets = useSafeAreaInsets();
   const { lessonId } = useLocalSearchParams<{ lessonId: string }>();
   const lesson = lessons.find((item) => item.id === lessonId);
+  const lessonStartTimeRef = useRef<number | null>(null);
+  const didCompleteLessonRef = useRef(false);
+  const lastQuestionIndexRef = useRef(0);
+
+  useEffect(() => {
+    if (!lesson) {
+      return;
+    }
+
+    const languageName =
+      languages.find((language) => language.id === lesson.languageId)?.name ??
+      lesson.languageId;
+
+    lessonStartTimeRef.current = Date.now();
+    didCompleteLessonRef.current = false;
+    lastQuestionIndexRef.current = 0;
+    captureLessonStarted(lesson, languageName);
+
+    return () => {
+      const startedAt = lessonStartTimeRef.current;
+
+      if (!startedAt || didCompleteLessonRef.current) {
+        return;
+      }
+
+      captureLessonAbandoned({
+        lastQuestionIndex: lastQuestionIndexRef.current,
+        lessonId: lesson.id,
+        startedAt,
+      });
+    };
+  }, [lesson]);
 
   if (!lesson) {
     return (
@@ -36,7 +71,10 @@ export default function LessonDetailScreen() {
       activeTabLabel="Learn"
       autoStartCall
       lesson={lesson}
-      onCallEnded={() => router.replace("/learn")}
+      onCallEnded={() => {
+        didCompleteLessonRef.current = true;
+        router.replace("/learn");
+      }}
     />
   );
 }
diff --git a/components/auth-screen.tsx b/components/auth-screen.tsx
@@ -1,4 +1,6 @@
 import { images } from "@/constants/images";
+import { identifyPostHogUser } from "@/lib/analytics";
+import { useLanguageStore } from "@/store/UseLanguageStore";
 import { useAuth, useSignIn, useSignUp, useSSO } from "@clerk/expo";
 import {
   AntDesign,
@@ -121,8 +123,9 @@ export function AuthScreen({ mode }: AuthScreenProps) {
   const { signIn, fetchStatus: signInStatus } = useSignIn();
   const { signUp, fetchStatus: signUpStatus } = useSignUp();
   const { startSSOFlow } = useSSO();
-  const { userId } = useAuth();
+  const { userId: authUserId } = useAuth();
   const posthog = usePostHog();
+  const selectedLanguageId = useLanguageStore((state) => state.selectedLanguageId);
   const [emailAddress, setEmailAddress] = useState("");
   const [password, setPassword] = useState("");
   const [authError, setAuthError] = useState<string | null>(null);
@@ -230,10 +233,12 @@ export function AuthScreen({ mode }: AuthScreenProps) {
           return;
         }
 
-        const userId = signUp.createdUserId;
-        if (userId) {
-          posthog.identify(userId, {
-            $set_once: { sign_up_date: new Date().toISOString() },
+        const newUserId = signUp.createdUserId;
+        if (newUserId) {
+          identifyPostHogUser({
+            isSignUp: true,
+            preferredLanguageId: selectedLanguageId,
+            userId: newUserId,
           });
         }
         posthog.capture("sign_up_completed");
@@ -261,9 +266,12 @@ export function AuthScreen({ mode }: AuthScreenProps) {
           return;
         }
 
-        const userId = getStableUserId(signIn);
-        if (userId) {
-          posthog.identify(userId);
+        const signedInUserId = getStableUserId(signIn);
+        if (signedInUserId) {
+          identifyPostHogUser({
+            preferredLanguageId: selectedLanguageId,
+            userId: signedInUserId,
+          });
         }
         posthog.capture("sign_in_completed");
       }
@@ -310,8 +318,15 @@ export function AuthScreen({ mode }: AuthScreenProps) {
 
       if (sessionId) {
         await setActive?.({ session: sessionId });
-        if (userId) {
-          posthog.identify(userId);
+        const completedUserId =
+          getStableUserId(ssoSignUp) ?? getStableUserId(ssoSignIn) ?? authUserId;
+
+        if (completedUserId) {
+          identifyPostHogUser({
+            isSignUp: Boolean(ssoSignUp?.createdUserId),
+            preferredLanguageId: selectedLanguageId,
+            userId: completedUserId,
+          });
         }
         posthog.capture("social_auth_completed", { strategy, auth_mode: mode });
         router.replace("/");
diff --git a/lib/analytics.ts b/lib/analytics.ts
@@ -0,0 +1,61 @@
+import { posthog } from "@/lib/posthog";
+import type { Lesson, SupportedLanguage } from "@/types/learning";
+
+type IdentifyUserOptions = {
+  isSignUp?: boolean;
+  preferredLanguageId: string | null;
+  userId: string;
+};
+
+export function identifyPostHogUser({
+  isSignUp = false,
+  preferredLanguageId,
+  userId,
+}: IdentifyUserOptions) {
+  posthog.identify(userId, {
+    $set: {
+      preferred_language: preferredLanguageId,
+    },
+    ...(isSignUp
+      ? {
+          $set_once: {
+            signup_date: new Date().toISOString(),
+          },
+        }
+      : {}),
+  });
+}
+
+export function captureLanguageSelected(language: SupportedLanguage) {
+  posthog.capture("language_selected", {
+    language_code: language.id,
+    language_name: language.name,
+  });
+}
+
+export function captureLessonStarted(lesson: Lesson, languageName: string) {
+  posthog.capture("lesson_started", {
+    language: languageName,
+    lesson_id: lesson.id,
+    lesson_number: lesson.order,
+  });
+}
+
+export function captureLessonAbandoned({
+  lastQuestionIndex,
+  lessonId,
+  startedAt,
+}: {
+  lastQuestionIndex: number;
+  lessonId: string;
+  startedAt: number;
+}) {
+  posthog.capture("lesson_abandoned", {
+    last_question_index: lastQuestionIndex,
+    lesson_id: lessonId,
+    time_into_lesson_seconds: Math.max(
+      0,
+      Math.round((Date.now() - startedAt) / 1000),
+    ),
+  });
+}
