feat(analytics): 增强 Google Analytics 隐私合规与追踪功能

- 修复 allow_google_signals 配置为 false，禁用跨设备追踪
- 升级 Cookie 同意组件，支持三级偏好控制（必要/分析/营销）
- 新增滚动深度追踪组件，追踪 25%/50%/75%/100% 里程碑
- 更新隐私政策，新增 Cookie 和网站分析工具章节
- 新增细化同意管理函数，支持 PIPL 合规

src/app/layout.tsx

@@ -8,6 +8,7 @@ import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics";
 import { CookieConsent } from "@/components/analytics/CookieConsent";
 import { PerformanceTracker } from "@/components/analytics/PerformanceTracker";
 import { OutboundLinkTracker } from "@/components/analytics/OutboundLinkTracker";
+import { ScrollDepthTracker } from "@/components/analytics/ScrollDepthTracker";
 import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
 import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
 import { ErrorBoundary } from "@/components/ui/error-boundary";
@@ -141,6 +142,7 @@ export default function RootLayout({
         <GoogleAnalytics />
         <PerformanceTracker />
         <OutboundLinkTracker />
+        <ScrollDepthTracker />
         <ThemeProvider>
           <ErrorBoundary>
             {children}

src/app/privacy/page.tsx

@@ -138,13 +138,95 @@ export default function PrivacyPolicyPage() {
             </section>
 
             <section className="mb-12">
-              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">七、如何联系我们</h2>
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">七、Cookie 和网站分析工具</h2>
+              
+              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.1 Cookie 使用说明</h3>
+              <p className="text-[#5C5C5C] leading-relaxed mb-4">
+                我们使用 Cookie 和类似技术来提供、保护和改进我们的服务。Cookie 是存储在您设备上的小型文本文件，帮助我们识别您的设备、记住您的偏好设置。
+              </p>
+              <div className="overflow-x-auto mb-6">
+                <table className="min-w-full border border-gray-200 rounded-lg">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">Cookie 类型</th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">用途</th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">持续时间</th>
+                      <th className="px-4 py-3 text-left text-sm font-semibold text-[#1C1C1C] border-b">是否必需</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200">
+                    <tr>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">必要 Cookie</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">网站基本功能运行</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">会话期间</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">是</td>
+                    </tr>
+                    <tr>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">分析 Cookie</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">了解网站使用情况，改进服务</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">14个月</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">否</td>
+                    </tr>
+                    <tr>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">营销 Cookie</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">个性化广告（当前未使用）</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">-</td>
+                      <td className="px-4 py-3 text-sm text-[#5C5C5C]">否</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+
+              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.2 Google Analytics 使用说明</h3>
+              <p className="text-[#5C5C5C] leading-relaxed mb-4">
+                我们使用 Google Analytics 4（由 Google LLC 提供）分析网站使用情况，帮助我们了解访客如何使用网站，从而改进用户体验。
+              </p>
+              <p className="text-[#5C5C5C] leading-relaxed mb-2">
+                <strong>收集的数据包括：</strong>
+              </p>
+              <ul className="list-disc pl-6 text-[#5C5C5C] space-y-1 mb-4">
+                <li>访问的页面和停留时间</li>
+                <li>设备类型、浏览器类型</li>
+                <li>地理位置（国家/城市级别，IP 地址已匿名化）</li>
+                <li>访问来源（直接访问、搜索引擎、外部链接）</li>
+              </ul>
+              <p className="text-[#5C5C5C] leading-relaxed mb-2">
+                <strong>我们已采取的保护措施：</strong>
+              </p>
+              <ul className="list-disc pl-6 text-[#5C5C5C] space-y-1 mb-4">
+                <li>IP 地址匿名化</li>
+                <li>数据保留期限设为 14 个月</li>
+                <li>禁用广告个性化功能</li>
+                <li>禁用 Google 信号（不进行跨设备追踪）</li>
+                <li>不与 Google 其他服务共享数据用于广告目的</li>
+              </ul>
+
+              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.3 您的选择</h3>
+              <ul className="list-disc pl-6 text-[#5C5C5C] space-y-2 mb-4">
+                <li>您可以在首次访问时选择接受或拒绝分析 Cookie</li>
+                <li>您可以点击页面右下角的&ldquo;Cookie 设置&rdquo;按钮随时更改偏好</li>
+                <li>您可以通过浏览器设置删除或阻止 Cookie（可能影响网站功能）</li>
+              </ul>
+
+              <h3 className="text-xl font-semibold text-[#1C1C1C] mb-3">7.4 数据删除请求</h3>
+              <p className="text-[#5C5C5C] leading-relaxed">
+                如您希望删除我们持有的您的个人数据，或撤回您的同意，请通过以下方式联系我们：
+              </p>
+              <ul className="list-none text-[#5C5C5C] space-y-1 mt-2">
+                <li>隐私邮箱：privacy@novalon.cn</li>
+                <li>联系地址：中国四川省成都市龙泉驿区幸福路12号</li>
+              </ul>
+            </section>
+
+            <section className="mb-12">
+              <h2 className="text-2xl font-bold text-[#1C1C1C] mb-4">八、如何联系我们</h2>
               <p className="text-[#5C5C5C] leading-relaxed mb-4">
                 如果您对本隐私政策有任何疑问、意见或建议，或需要行使您的权利，请通过以下方式与我们联系：
               </p>
               <ul className="list-none text-[#5C5C5C] space-y-2">
                 <li>公司名称：四川睿新致远科技有限公司</li>
                 <li>联系邮箱：contact@novalon.cn</li>
+                <li>隐私邮箱：privacy@novalon.cn</li>
                 <li>联系地址：中国四川省成都市龙泉驿区幸福路12号</li>
               </ul>
             </section>

src/components/analytics/CookieConsent.tsx

@@ -1,48 +1,91 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
-import { updateConsent, trackButtonClick } from '@/lib/analytics';
+import {
+  updateConsentDetailed,
+  trackButtonClick,
+  CookiePreferences,
+  getStoredPreferences,
+  storePreferences,
+  getDefaultPreferences,
+} from '@/lib/analytics';
 import { motion, AnimatePresence } from 'framer-motion';
 
-const CONSENT_KEY = 'ga_consent';
+const LEGACY_CONSENT_KEY = 'ga_consent';
 
 export function CookieConsent() {
   const [showConsent, setShowConsent] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
+  const [preferences, setPreferences] = useState<CookiePreferences>(getDefaultPreferences());
 
   useEffect(() => {
-    const consent = localStorage.getItem(CONSENT_KEY);
+    const stored = getStoredPreferences();
-    if (!consent) {
+    if (stored) {
+      updateConsentDetailed(stored);
+    } else {
+      const legacyConsent = localStorage.getItem(LEGACY_CONSENT_KEY);
+      if (legacyConsent) {
+        const migratedPrefs: CookiePreferences = {
+          necessary: true,
+          analytics: legacyConsent === 'granted',
+          marketing: false,
+          timestamp: Date.now(),
+        };
+        storePreferences(migratedPrefs);
+        updateConsentDetailed(migratedPrefs);
+        localStorage.removeItem(LEGACY_CONSENT_KEY);
+      } else {
         const timer = setTimeout(() => {
           setShowConsent(true);
         }, 2000);
         return () => clearTimeout(timer);
-    } else if (consent === 'granted') {
+      }
-      updateConsent(true);
     }
     return undefined;
   }, []);
 
-  const handleAccept = () => {
+  const handleSavePreferences = useCallback((prefs: CookiePreferences) => {
     setIsAnimating(true);
-    localStorage.setItem(CONSENT_KEY, 'granted');
+    const finalPrefs = { ...prefs, timestamp: Date.now() };
-    updateConsent(true);
+    storePreferences(finalPrefs);
-    trackButtonClick('accept_cookies', 'consent_banner');
+    updateConsentDetailed(finalPrefs);
+    trackButtonClick('save_cookie_preferences', 'consent_banner');
     setTimeout(() => {
       setShowConsent(false);
+      setShowSettings(false);
       setIsAnimating(false);
     }, 300);
+  }, []);
+
+  const handleAcceptAll = () => {
+    const allAccepted: CookiePreferences = {
+      necessary: true,
+      analytics: true,
+      marketing: false,
+      timestamp: Date.now(),
+    };
+    handleSavePreferences(allAccepted);
+    trackButtonClick('accept_all_cookies', 'consent_banner');
   };
 
-  const handleDecline = () => {
+  const handleRejectAll = () => {
-    setIsAnimating(true);
+    const allRejected: CookiePreferences = {
-    localStorage.setItem(CONSENT_KEY, 'denied');
+      necessary: true,
-    updateConsent(false);
+      analytics: false,
-    trackButtonClick('decline_cookies', 'consent_banner');
+      marketing: false,
-    setTimeout(() => {
+      timestamp: Date.now(),
-      setShowConsent(false);
+    };
-      setIsAnimating(false);
+    handleSavePreferences(allRejected);
-    }, 300);
+    trackButtonClick('reject_all_cookies', 'consent_banner');
+  };
+
+  const handleTogglePreference = (key: 'analytics' | 'marketing') => {
+    setPreferences((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  const handleSaveCustom = () => {
+    handleSavePreferences(preferences);
   };
 
   return (
@@ -56,10 +99,11 @@ export function CookieConsent() {
           className="fixed bottom-16 md:bottom-0 left-0 right-0 z-[9998] bg-white border-t border-gray-200 shadow-lg"
         >
           <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
+            {!showSettings ? (
               <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
                 <div className="flex-1">
                   <p className="text-sm text-gray-700">
-                  我们使用 Cookie 和类似技术来改善您的体验、分析网站流量并提供个性化内容。
+                    我们使用 Cookie 和类似技术来改善您的体验、分析网站流量。
                     继续使用即表示您同意我们的{' '}
                     <a
                       href="/privacy"
@@ -70,26 +114,141 @@ export function CookieConsent() {
                     。
                   </p>
                 </div>
-              <div className="flex gap-3 shrink-0">
+                <div className="flex flex-wrap gap-3 shrink-0">
                   <button
-                  onClick={handleDecline}
+                    onClick={() => setShowSettings(true)}
                     disabled={isAnimating}
                     className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
                   >
-                  拒绝
+                    管理偏好
                   </button>
                   <button
-                  onClick={handleAccept}
+                    onClick={handleRejectAll}
+                    disabled={isAnimating}
+                    className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+                  >
+                    仅必要
+                  </button>
+                  <button
+                    onClick={handleAcceptAll}
                     disabled={isAnimating}
                     className="px-4 py-2 text-sm font-medium text-white bg-[#C41E3A] rounded-lg hover:bg-[#A01830] transition-colors disabled:opacity-50"
                   >
-                  接受
+                    接受所有
                   </button>
                 </div>
               </div>
+            ) : (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <h3 className="text-lg font-semibold text-[#1C1C1C]">Cookie 偏好设置</h3>
+                  <button
+                    onClick={() => setShowSettings(false)}
+                    className="text-gray-500 hover:text-gray-700"
+                    aria-label="关闭设置"
+                  >
+                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
+                    <input
+                      type="checkbox"
+                      checked
+                      disabled
+                      className="mt-1 h-4 w-4 rounded border-gray-300 text-[#C41E3A] focus:ring-[#C41E3A] cursor-not-allowed"
+                      aria-label="必要 Cookie"
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-[#1C1C1C]">必要 Cookie</span>
+                        <span className="text-xs px-2 py-0.5 bg-gray-200 text-gray-600 rounded">始终启用</span>
+                      </div>
+                      <p className="text-sm text-[#5C5C5C] mt-1">
+                        网站正常运行所必需，无法禁用
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg">
+                    <input
+                      type="checkbox"
+                      checked={preferences.analytics}
+                      onChange={() => handleTogglePreference('analytics')}
+                      className="mt-1 h-4 w-4 rounded border-gray-300 text-[#C41E3A] focus:ring-[#C41E3A] cursor-pointer"
+                      aria-label="分析 Cookie"
+                    />
+                    <div className="flex-1">
+                      <span className="font-medium text-[#1C1C1C]">分析 Cookie</span>
+                      <p className="text-sm text-[#5C5C5C] mt-1">
+                        帮助我们了解访客如何使用网站，改进用户体验
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg opacity-50">
+                    <input
+                      type="checkbox"
+                      checked={preferences.marketing}
+                      onChange={() => handleTogglePreference('marketing')}
+                      className="mt-1 h-4 w-4 rounded border-gray-300 text-[#C41E3A] focus:ring-[#C41E3A] cursor-pointer"
+                      aria-label="营销 Cookie"
+                    />
+                    <div className="flex-1">
+                      <span className="font-medium text-[#1C1C1C]">营销 Cookie</span>
+                      <p className="text-sm text-[#5C5C5C] mt-1">
+                        用于个性化广告（当前未使用）
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-3 pt-2">
+                  <button
+                    onClick={() => setShowSettings(false)}
+                    disabled={isAnimating}
+                    className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors disabled:opacity-50"
+                  >
+                    取消
+                  </button>
+                  <button
+                    onClick={handleSaveCustom}
+                    disabled={isAnimating}
+                    className="px-4 py-2 text-sm font-medium text-white bg-[#C41E3A] rounded-lg hover:bg-[#A01830] transition-colors disabled:opacity-50"
+                  >
+                    保存偏好
+                  </button>
+                </div>
+              </div>
+            )}
           </div>
         </motion.div>
       )}
     </AnimatePresence>
   );
 }
+
+export function CookieSettingsButton() {
+  const [isVisible] = useState(() => {
+    if (typeof window === 'undefined') {return false;}
+    return !!getStoredPreferences();
+  });
+
+  if (!isVisible) {return null;}
+
+  return (
+    <button
+      onClick={() => {
+        const event = new CustomEvent('open-cookie-settings');
+        window.dispatchEvent(event);
+      }}
+      className="fixed bottom-4 right-4 z-[9997] px-3 py-2 text-xs font-medium text-gray-600 bg-white border border-gray-200 rounded-lg shadow-sm hover:bg-gray-50 transition-colors"
+      aria-label="Cookie 设置"
+    >
+      Cookie 设置
+    </button>
+  );
+}

src/components/analytics/GoogleAnalytics.tsx

@@ -48,7 +48,7 @@ function GoogleAnalyticsContent() {
           gtag('config', '${GA_MEASUREMENT_ID}', {
             send_page_view: false,
             anonymize_ip: true,
-            allow_google_signals: true,
+            allow_google_signals: false,
             allow_ad_personalization_signals: false,
             cookie_flags: 'SameSite=None;Secure'
           });

src/components/analytics/ScrollDepthTracker.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect, useRef, useCallback } from 'react';
+import { usePathname } from 'next/navigation';
+import { trackScrollDepth } from '@/lib/analytics';
+
+const MILESTONES = [25, 50, 75, 100] as const;
+
+export function ScrollDepthTracker() {
+  const trackedRef = useRef<Set<number>>(new Set());
+  const pathname = usePathname();
+
+  const handleScroll = useCallback(() => {
+    const scrollTop = window.scrollY;
+    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+
+    if (docHeight <= 0) {
+      return;
+    }
+
+    const scrollPercent = Math.round((scrollTop / docHeight) * 100);
+
+    MILESTONES.forEach((milestone) => {
+      if (scrollPercent >= milestone && !trackedRef.current.has(milestone)) {
+        trackedRef.current.add(milestone);
+        trackScrollDepth(milestone);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    trackedRef.current = new Set();
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [pathname, handleScroll]);
+
+  return null;
+}

src/lib/analytics.ts

@@ -149,6 +149,13 @@ export const trackProductView = (productId: string, productName: string) => {
   }
 };
 
+export interface CookiePreferences {
+  necessary: boolean;
+  analytics: boolean;
+  marketing: boolean;
+  timestamp: number;
+}
+
 export const updateConsent = (granted: boolean) => {
   if (typeof window !== 'undefined' && window.gtag) {
     window.gtag('consent', 'update', {
@@ -157,3 +164,44 @@ export const updateConsent = (granted: boolean) => {
     });
   }
 };
+
+export const updateConsentDetailed = (preferences: CookiePreferences) => {
+  if (typeof window !== 'undefined' && window.gtag) {
+    window.gtag('consent', 'update', {
+      analytics_storage: preferences.analytics ? 'granted' : 'denied',
+      ad_storage: preferences.marketing ? 'granted' : 'denied',
+      functionality_storage: 'granted',
+      personalization_storage: preferences.marketing ? 'granted' : 'denied',
+      security_storage: 'granted',
+    });
+  }
+};
+
+export const getStoredPreferences = (): CookiePreferences | null => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  try {
+    const stored = localStorage.getItem('cookie_preferences');
+    if (stored) {
+      return JSON.parse(stored) as CookiePreferences;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+};
+
+export const storePreferences = (preferences: CookiePreferences) => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('cookie_preferences', JSON.stringify(preferences));
+  }
+};
+
+export const getDefaultPreferences = (): CookiePreferences => ({
+  necessary: true,
+  analytics: false,
+  marketing: false,
+  timestamp: Date.now(),
+});