docs: integrate tracking for download and navigation events, add TIANJI analytics script, and create TrackedButton/TrackedLink components for enhanced user interaction tracking

moonrailgun · moonrailgun · commit 84b98d45b9a1 · 2026-05-23T05:39:02.000+08:00
diff --git a/website/app/download-browser/DownloadRedirect.tsx b/website/app/download-browser/DownloadRedirect.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { LucideIcon } from '@/components/ui/LucideIcon';
+import { trackEvent } from '@/lib/analytics';
 import styles from './download.module.css';
 
 interface PlatformInfo {
@@ -60,6 +61,11 @@ export function DownloadRedirect() {
         setTargetUrl(target);
         setStatus('ready');
 
+        trackEvent('download_redirect', {
+          platform: key,
+          version: cfg.version,
+        });
+
         // Redirect on the next tick so the "preparing your download" message
         // is rendered before navigation. `replace` keeps the back button sane.
         window.setTimeout(() => {
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from 'next';
+import Script from 'next/script';
 import './globals.css';
 import { SITE_URL } from '@/lib/version';
+import { TIANJI_WEBSITE_ID } from '@/lib/analytics';
 
 export const metadata: Metadata = {
   metadataBase: new URL(SITE_URL),
@@ -54,6 +56,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en">
       <body>{children}</body>
+      <Script
+        src="https://app.tianji.dev/tracker.js"
+        data-website-id={TIANJI_WEBSITE_ID}
+        strategy="afterInteractive"
+      />
     </html>
   );
 }
diff --git a/website/components/DownloadCTA.tsx b/website/components/DownloadCTA.tsx
@@ -3,7 +3,8 @@ import {
   CHROMIUM_VERSION,
   GITHUB_URL,
 } from '@/lib/version';
-import { Button } from './ui/Button';
+import { TrackedButton } from './ui/TrackedButton';
+import { TrackedLink } from './ui/TrackedLink';
 import { LucideIcon } from './ui/LucideIcon';
 import styles from './DownloadCTA.module.css';
 
@@ -14,20 +15,27 @@ export function DownloadCTA() {
       <p className={styles.sub}>
         v{PRODUCT_VERSION} · Built on Chromium {CHROMIUM_VERSION}
       </p>
-      <Button href="/download" variant="primary">
+      <TrackedButton
+        href="/download"
+        variant="primary"
+        event="download_click"
+        eventPayload={{ source: 'cta' }}
+      >
         <LucideIcon name="download" size={16} aria-hidden />
         Download
-      </Button>
+      </TrackedButton>
       <p className={styles.hint}>
         macOS (Apple Silicon) available · Linux and Windows coming soon ·{' '}
-        <a
+        <TrackedLink
           href={GITHUB_URL}
           target="_blank"
           rel="noopener noreferrer"
           className={styles.hintLink}
+          event="github_click"
+          eventPayload={{ source: 'cta_hint' }}
         >
           ★ Star on GitHub for updates
-        </a>
+        </TrackedLink>
       </p>
     </section>
   );
diff --git a/website/components/Hero.tsx b/website/components/Hero.tsx
@@ -3,7 +3,7 @@ import {
   CHROMIUM_VERSION,
   GITHUB_URL,
 } from '@/lib/version';
-import { Button } from './ui/Button';
+import { TrackedButton } from './ui/TrackedButton';
 import { LucideIcon } from './ui/LucideIcon';
 import { HeroAnimation } from './ui/HeroAnimation';
 import styles from './Hero.module.css';
@@ -15,14 +15,25 @@ export function Hero() {
       <h1 className={styles.h1}>An opinionated browser, built on Chromium.</h1>
       <p className={styles.subtitle}>Vertical tabs, soft corners, content first.</p>
       <div className={styles.ctas}>
-        <Button href="/download" variant="primary">
+        <TrackedButton
+          href="/download"
+          variant="primary"
+          event="download_click"
+          eventPayload={{ source: 'hero' }}
+        >
           <LucideIcon name="download" size={16} aria-hidden />
           Download
-        </Button>
-        <Button href={GITHUB_URL} variant="ghost" external>
+        </TrackedButton>
+        <TrackedButton
+          href={GITHUB_URL}
+          variant="ghost"
+          external
+          event="github_click"
+          eventPayload={{ source: 'hero' }}
+        >
           <LucideIcon name="star" size={16} aria-hidden />
           Star on GitHub
-        </Button>
+        </TrackedButton>
       </div>
       <p className={styles.versionHint}>
         Latest: v{PRODUCT_VERSION} · Chromium {CHROMIUM_VERSION}
diff --git a/website/components/TopNav.tsx b/website/components/TopNav.tsx
@@ -1,9 +1,12 @@
+'use client';
+
 /* eslint-disable @next/next/no-img-element */
 import Link from 'next/link';
 import { GITHUB_URL } from '@/lib/version';
 import { Button } from './ui/Button';
 import { LucideIcon } from './ui/LucideIcon';
 import { GitHubIcon } from './ui/BrandIcons';
+import { trackEvent } from '@/lib/analytics';
 import styles from './TopNav.module.css';
 
 export function TopNav() {
@@ -32,10 +35,18 @@ export function TopNav() {
         <span className={styles.brandWord}>Dao</span>
       </a>
       <div className={styles.links}>
-        <Link href="/#features" className={styles.link}>
+        <Link
+          href="/#features"
+          className={styles.link}
+          onClick={() => trackEvent('nav_link_click', { target: 'features' })}
+        >
           <span className={styles.linkText}>Features</span>
         </Link>
-        <Link href="/agent" className={styles.link}>
+        <Link
+          href="/agent"
+          className={styles.link}
+          onClick={() => trackEvent('nav_link_click', { target: 'agent' })}
+        >
           <span className={styles.linkText}>AI Agent</span>
         </Link>
         <a
@@ -44,10 +55,15 @@ export function TopNav() {
           rel="noopener noreferrer"
           className={styles.link}
           aria-label="GitHub repository"
+          onClick={() => trackEvent('github_click', { source: 'nav' })}
         >
           <GitHubIcon size={18} aria-hidden />
         </a>
-        <Button href="/download" variant="primary">
+        <Button
+          href="/download"
+          variant="primary"
+          onClick={() => trackEvent('download_click', { source: 'nav' })}
+        >
           <LucideIcon name="download" size={16} aria-hidden />
           Download
         </Button>
diff --git a/website/components/ui/BrowserFrameMockup.tsx b/website/components/ui/BrowserFrameMockup.tsx
@@ -271,7 +271,7 @@ function ArticlePage({
         <article className={styles.article}>
           <div className={styles.articleEyebrow}>ESSAY · 8 MIN READ</div>
           <h1 className={styles.articleTitle}>Why we still build browsers</h1>
-          <div className={styles.articleByline}>by Jamie Lin · April 2026</div>
+          <div className={styles.articleByline}>by Lyon Chen · April 2026</div>
           <p className={styles.articleBody}>
             The browser has been with us for thirty years, and somehow it has never
             stopped feeling unfinished. Tabs sprawl. Sidebars clutter. Search bars
@@ -402,7 +402,7 @@ function AgentMockup() {
           <article className={styles.article}>
             <div className={styles.articleEyebrow}>ESSAY · 8 MIN READ</div>
             <h1 className={styles.articleTitle}>Why we still build browsers</h1>
-            <div className={styles.articleByline}>by Jamie Lin · April 2026</div>
+            <div className={styles.articleByline}>by Lyon Chen · April 2026</div>
             <p className={styles.articleBody}>
               The browser has been with us for thirty years, and somehow it has never
               stopped feeling unfinished. Tabs sprawl. Sidebars clutter. Search bars
diff --git a/website/components/ui/TrackedButton.tsx b/website/components/ui/TrackedButton.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { Button, type ButtonProps } from './Button';
+import { trackEvent, type AnalyticsEvent } from '@/lib/analytics';
+
+type EventPayload = Record<string, string | number | boolean>;
+
+interface TrackedButtonProps extends ButtonProps {
+  event: AnalyticsEvent;
+  eventPayload?: EventPayload;
+}
+
+export function TrackedButton({
+  event,
+  eventPayload,
+  onClick,
+  ...rest
+}: TrackedButtonProps) {
+  return (
+    <Button
+      {...rest}
+      onClick={(e) => {
+        trackEvent(event, eventPayload);
+        onClick?.(e);
+      }}
+    />
+  );
+}
diff --git a/website/components/ui/TrackedLink.tsx b/website/components/ui/TrackedLink.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import type { AnchorHTMLAttributes } from 'react';
+import { trackEvent, type AnalyticsEvent } from '@/lib/analytics';
+
+type EventPayload = Record<string, string | number | boolean>;
+
+interface TrackedLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  event: AnalyticsEvent;
+  eventPayload?: EventPayload;
+}
+
+export function TrackedLink({
+  event,
+  eventPayload,
+  onClick,
+  children,
+  ...rest
+}: TrackedLinkProps) {
+  return (
+    <a
+      {...rest}
+      onClick={(e) => {
+        trackEvent(event, eventPayload);
+        onClick?.(e);
+      }}
+    >
+      {children}
+    </a>
+  );
+}
diff --git a/website/lib/analytics.ts b/website/lib/analytics.ts
@@ -0,0 +1,30 @@
+export const TIANJI_WEBSITE_ID = 'cmphf1o19dv4k78rcxz79qz3x';
+
+export type AnalyticsEvent =
+  | 'download_click'
+  | 'download_redirect'
+  | 'github_click'
+  | 'nav_link_click';
+
+type EventPayload = Record<string, string | number | boolean>;
+
+interface TianjiTracker {
+  track: (name: string, payload?: EventPayload) => void;
+}
+
+declare global {
+  interface Window {
+    tianji?: TianjiTracker;
+  }
+}
+
+export function trackEvent(name: AnalyticsEvent, payload?: EventPayload): void {
+  if (typeof window === 'undefined') return;
+  const tracker = window.tianji;
+  if (!tracker || typeof tracker.track !== 'function') return;
+  try {
+    tracker.track(name, payload);
+  } catch {
+    // Swallow tracker errors — analytics must never break the UI.
+  }
+}
