feat(frontend): track authenticated console users

monster · monster · commit c58bcd4dd4b7 · 2026-07-14T11:04:38.000+08:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -46,7 +46,7 @@
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
-    
+
     <!-- Google tag (gtag.js) -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-RQQN0BK11M"></script>
     <script>
@@ -56,32 +56,31 @@
 
       gtag('config', 'G-RQQN0BK11M');
     </script>
-<script>
-  var _paq = window._paq = window._paq || [];
-  _paq.push(["setDocumentTitle", document.domain + "/" + document.title]);
-  _paq.push(["setRequestMethod", "POST"]);
-  _paq.push(["setDomains", [
-    "showcase.monkeycode-ai.online",
-    "*.showcase.monkeycode-ai.online",
-    "monkeycode-ai.com",
-    "monkeycode-ai.net",
-  ]]);
-  _paq.push(["enableCrossDomainLinking"]);
-  _paq.push(["trackPageView"]);
-  _paq.push(["enableLinkTracking"]);
-  (function() {
-    var u = "//stats.monkeycode-ai.com/";
-    _paq.push(["setTrackerUrl", u + "statcall.php"]);
-    _paq.push(["setSiteId", "2"]);
-
-    var d = document;
-    var g = d.createElement("script");
-    var s = d.getElementsByTagName("script")[0];
-    g.async = true;
-    g.src = u + "statloader.js";
-    s.parentNode.insertBefore(g, s);
-  })();
+    <script>
+      var _paq = window._paq = window._paq || [];
+      _paq.push(["setDocumentTitle", location.hostname + "/" + document.title]);
+      _paq.push(["setRequestMethod", "POST"]);
+      _paq.push(["setDomains", [
+        "showcase.monkeycode-ai.online",
+        "*.showcase.monkeycode-ai.online",
+        "monkeycode-ai.com",
+        "monkeycode-ai.net",
+      ]]);
+      _paq.push(["enableCrossDomainLinking"]);
+      _paq.push(["enableLinkTracking"]);
+      (function() {
+        var u = "https://stats.monkeycode-ai.com/";
+        _paq.push(["setTrackerUrl", u + "statcall.php"]);
+        _paq.push(["setSiteId", "2"]);
+        _paq.push(["trackPageView"]);
 
-</script>
+        var d = document;
+        var g = d.createElement("script");
+        var s = d.getElementsByTagName("script")[0];
+        g.async = true;
+        g.src = u + "statloader.js";
+        s.parentNode.insertBefore(g, s);
+      })();
+    </script>
   </body>
 </html>
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -35,6 +35,7 @@ import SelfHostingPage from "./pages/self-hosting"
 import { TooltipProvider } from "@/components/ui/tooltip"
 import { IS_OFFLINE_EDITION } from "@/utils/edition"
 import { SiteRegionPrompt } from "@/components/site-region-prompt"
+import { MatomoConsoleTracker } from "@/components/matomo-console-tracker"
 
 function TaskDetailRoute() {
   const { taskId } = useParams()
@@ -47,6 +48,7 @@ function App() {
       <TooltipProvider>
         <BrowserRouter>
           <ThemePathListener />
+          <MatomoConsoleTracker />
           <Routes>
             <Route path="/" element={IS_OFFLINE_EDITION ? <Navigate to="/login" replace /> : <WelcomePage />} />
             <Route path="/playground" element={<PlaygroundPage />} />
diff --git a/frontend/src/components/console/nav/nav-balance.tsx b/frontend/src/components/console/nav/nav-balance.tsx
@@ -31,6 +31,8 @@ import { useNavigate } from "react-router-dom";
 import SubscriptionPlanDialog from "./subscription-plan-dialog";
 import { IS_OFFLINE_EDITION } from "@/utils/edition";
 import { useTranslation } from "react-i18next";
+import { useAppRuntime } from "@/components/app-runtime-provider";
+import { resetMatomoUser } from "@/lib/matomo";
 
 interface NavBalanceProps {
   variant?: "sidebar" | "header";
@@ -83,6 +85,7 @@ export default function NavBalance({
   const avatarInputRef = useRef<HTMLInputElement>(null);
   const previousDialogOpenRef = useRef(false);
   const navigate = useNavigate()
+  const { reloadAuth } = useAppRuntime()
   const {
     balance,
     reloadSubscription,
@@ -115,6 +118,8 @@ export default function NavBalance({
   const handleLogout = () => {
     apiRequest("v1UsersLogoutCreate", {}, [], (resp) => {
       if (resp.code === 0) {
+        resetMatomoUser()
+        void reloadAuth()
         navigate("/")
       } else {
         toast.error(t("navBalance.toast.logoutFailed", { message: resp.message || t("navBalance.common.unknownError") }))
diff --git a/frontend/src/components/matomo-console-tracker.tsx b/frontend/src/components/matomo-console-tracker.tsx
@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { useAppRuntime } from "@/components/app-runtime-provider";
+import {
+  identifyMatomoUser,
+  observeMatomoRoute,
+  trackMatomoAuthenticated,
+} from "@/lib/matomo";
+
+function isConsolePath(pathname: string) {
+  return pathname === "/console" || pathname.startsWith("/console/");
+}
+
+export function MatomoConsoleTracker() {
+  const { auth } = useAppRuntime();
+  const location = useLocation();
+
+  useEffect(() => {
+    const normalizedPath = location.pathname.replace(/\/+$/, "") || "/";
+    const consolePath = isConsolePath(normalizedPath);
+
+    if (!consolePath) {
+      observeMatomoRoute({ trackPageView: false });
+      return;
+    }
+
+    // /console immediately redirects to its index route. Waiting avoids counting both URLs.
+    if (normalizedPath === "/console") {
+      return;
+    }
+
+    const userId = auth.user?.id;
+    if (auth.status !== "authenticated" || !userId) {
+      return;
+    }
+
+    const identified = identifyMatomoUser(userId);
+    const pageViewTracked = observeMatomoRoute({ trackPageView: true });
+
+    // A direct page load already produced the anonymous page view in index.html.
+    // Send an event after identification instead of duplicating that page view.
+    if (identified && !pageViewTracked) {
+      trackMatomoAuthenticated();
+    }
+  }, [
+    auth.status,
+    auth.user?.id,
+    location.hash,
+    location.pathname,
+    location.search,
+  ]);
+
+  return null;
+}
diff --git a/frontend/src/lib/matomo.ts b/frontend/src/lib/matomo.ts
@@ -0,0 +1,90 @@
+type MatomoCommand = [name: string, ...args: unknown[]];
+
+declare global {
+  interface Window {
+    _paq?: MatomoCommand[];
+  }
+}
+
+let identifiedUserId: string | null = null;
+let lastObservedUrl = getCurrentUrl();
+
+function getCurrentUrl() {
+  return typeof window === "undefined" ? "" : window.location.href;
+}
+
+function getMatomoQueue() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  window._paq = window._paq || [];
+  return window._paq;
+}
+
+export function identifyMatomoUser(userId: string) {
+  const normalizedUserId = String(userId).trim();
+  const queue = getMatomoQueue();
+
+  if (!queue || !normalizedUserId || identifiedUserId === normalizedUserId) {
+    return false;
+  }
+
+  queue.push(["setUserId", normalizedUserId]);
+  identifiedUserId = normalizedUserId;
+  return true;
+}
+
+export function trackMatomoAuthenticated() {
+  getMatomoQueue()?.push(["trackEvent", "user", "authenticated"]);
+}
+
+export function resetMatomoUser() {
+  const queue = getMatomoQueue();
+
+  if (!queue) {
+    identifiedUserId = null;
+    return;
+  }
+
+  if (identifiedUserId) {
+    queue.push(["trackEvent", "user", "logout_success"]);
+  }
+
+  queue.push(["resetUserId"]);
+  identifiedUserId = null;
+}
+
+type ObserveMatomoRouteOptions = {
+  trackPageView: boolean;
+  url?: string;
+  title?: string;
+};
+
+export function observeMatomoRoute({
+  trackPageView,
+  url = getCurrentUrl(),
+  title = typeof document === "undefined" ? "" : document.title,
+}: ObserveMatomoRouteOptions) {
+  if (!url || url === lastObservedUrl) {
+    return false;
+  }
+
+  lastObservedUrl = url;
+
+  if (!trackPageView) {
+    return false;
+  }
+
+  const queue = getMatomoQueue();
+  if (!queue) {
+    return false;
+  }
+
+  const hostname =
+    typeof window === "undefined" ? "" : window.location.hostname;
+  queue.push(["setCustomUrl", url]);
+  queue.push(["setDocumentTitle", `${hostname}/${title}`]);
+  queue.push(["trackPageView"]);
+  return true;
+}
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
@@ -52,7 +52,7 @@ export default function LoginPage({
   const [defaultOIDCConfig, setDefaultOIDCConfig] = React.useState<DomainTeamOIDCPublicConfigResp | null>(null)
   const navigate = useNavigate()
   const { t } = useTranslation()
-  const { serverConfig } = useAppRuntime()
+  const { reloadAuth, serverConfig } = useAppRuntime()
   const serverRegion = serverConfig?.region as string | undefined
   const isCnRegion = serverRegion === "cn"
   const isGlobalRegion = serverRegion === "global"
@@ -122,10 +122,11 @@ export default function LoginPage({
         email: userEmail.trim(),
         password: userPassword.trim(),
         captcha_token: token,
-      }, [], (resp) => {
+      }, [], async (resp) => {
         if (resp.code === 0) {
           localStorage.setItem(USER_STORAGE_KEY, JSON.stringify({ email: userEmail.trim(), password: userPassword.trim() }))
-          navigate('/console/')
+          await reloadAuth()
+          navigate('/console/tasks')
         } else {
           toast.error(t("login.toast.loginFailed"))
         }
@@ -144,7 +145,7 @@ export default function LoginPage({
 
     try {
       const response = await new Api().api.v1UsersOauthLoginDetail(provider, {
-        redirect_url: "/console/",
+        redirect_url: "/console/tasks",
       })
       const authUrl = response.data?.data?.auth_url
 
diff --git a/frontend/test/matomo.test.ts b/frontend/test/matomo.test.ts
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+test("Matomo 在识别用户后记录 Console 页面且避免重复 PV", async () => {
+  const queue: unknown[][] = [];
+  const location = new URL("https://monkeycode-ai.com/login");
+
+  Object.defineProperty(globalThis, "window", {
+    configurable: true,
+    value: {
+      _paq: queue,
+      location,
+    },
+  });
+  Object.defineProperty(globalThis, "document", {
+    configurable: true,
+    value: { title: "MonkeyCode" },
+  });
+
+  const {
+    identifyMatomoUser,
+    observeMatomoRoute,
+    resetMatomoUser,
+    trackMatomoAuthenticated,
+  } = await import("../src/lib/matomo.ts");
+
+  assert.equal(identifyMatomoUser("user-1"), true);
+  assert.deepEqual(queue.at(-1), ["setUserId", "user-1"]);
+
+  location.href = "https://monkeycode-ai.com/console/tasks";
+  assert.equal(observeMatomoRoute({ trackPageView: true }), true);
+  assert.deepEqual(queue.slice(-3), [
+    ["setCustomUrl", "https://monkeycode-ai.com/console/tasks"],
+    ["setDocumentTitle", "monkeycode-ai.com/MonkeyCode"],
+    ["trackPageView"],
+  ]);
+
+  assert.equal(identifyMatomoUser("user-1"), false);
+  assert.equal(observeMatomoRoute({ trackPageView: true }), false);
+
+  trackMatomoAuthenticated();
+  assert.deepEqual(queue.at(-1), ["trackEvent", "user", "authenticated"]);
+
+  resetMatomoUser();
+  assert.deepEqual(queue.slice(-2), [
+    ["trackEvent", "user", "logout_success"],
+    ["resetUserId"],
+  ]);
+});
