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

Merged
zhangxiang merged 1 commits from refactor/google-analytics into dev 2026-04-22 22:31:21 +08:00
6 changed files with 387 additions and 54 deletions
+2
View File
@@ -8,6 +8,7 @@ import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics";
import { CookieConsent } from "@/components/analytics/CookieConsent"; import { CookieConsent } from "@/components/analytics/CookieConsent";
import { PerformanceTracker } from "@/components/analytics/PerformanceTracker"; import { PerformanceTracker } from "@/components/analytics/PerformanceTracker";
import { OutboundLinkTracker } from "@/components/analytics/OutboundLinkTracker"; import { OutboundLinkTracker } from "@/components/analytics/OutboundLinkTracker";
import { ScrollDepthTracker } from "@/components/analytics/ScrollDepthTracker";
import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data"; import { OrganizationSchema, WebsiteSchema } from "@/components/seo/structured-data";
import { MobileTabBar } from "@/components/layout/mobile-tab-bar"; import { MobileTabBar } from "@/components/layout/mobile-tab-bar";
import { ErrorBoundary } from "@/components/ui/error-boundary"; import { ErrorBoundary } from "@/components/ui/error-boundary";
@@ -141,6 +142,7 @@ export default function RootLayout({
<GoogleAnalytics /> <GoogleAnalytics />
<PerformanceTracker /> <PerformanceTracker />
<OutboundLinkTracker /> <OutboundLinkTracker />
<ScrollDepthTracker />
<ThemeProvider> <ThemeProvider>
<ErrorBoundary> <ErrorBoundary>
{children} {children}
+83 -1
View File
@@ -138,13 +138,95 @@ export default function PrivacyPolicyPage() {
</section> </section>
<section className="mb-12"> <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 className="text-[#5C5C5C] leading-relaxed mb-4">
使 使
</p> </p>
<ul className="list-none text-[#5C5C5C] space-y-2"> <ul className="list-none text-[#5C5C5C] space-y-2">
<li></li> <li></li>
<li>contact@novalon.cn</li> <li>contact@novalon.cn</li>
<li>privacy@novalon.cn</li>
<li>驿12</li> <li>驿12</li>
</ul> </ul>
</section> </section>
+211 -52
View File
@@ -1,48 +1,91 @@
'use client'; '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'; import { motion, AnimatePresence } from 'framer-motion';
const CONSENT_KEY = 'ga_consent'; const LEGACY_CONSENT_KEY = 'ga_consent';
export function CookieConsent() { export function CookieConsent() {
const [showConsent, setShowConsent] = useState(false); const [showConsent, setShowConsent] = useState(false);
const [showSettings, setShowSettings] = useState(false);
const [isAnimating, setIsAnimating] = useState(false); const [isAnimating, setIsAnimating] = useState(false);
const [preferences, setPreferences] = useState<CookiePreferences>(getDefaultPreferences());
useEffect(() => { useEffect(() => {
const consent = localStorage.getItem(CONSENT_KEY); const stored = getStoredPreferences();
if (!consent) { if (stored) {
const timer = setTimeout(() => { updateConsentDetailed(stored);
setShowConsent(true); } else {
}, 2000); const legacyConsent = localStorage.getItem(LEGACY_CONSENT_KEY);
return () => clearTimeout(timer); if (legacyConsent) {
} else if (consent === 'granted') { const migratedPrefs: CookiePreferences = {
updateConsent(true); 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);
}
} }
return undefined; return undefined;
}, []); }, []);
const handleAccept = () => { const handleSavePreferences = useCallback((prefs: CookiePreferences) => {
setIsAnimating(true); 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(() => { setTimeout(() => {
setShowConsent(false); setShowConsent(false);
setShowSettings(false);
setIsAnimating(false); setIsAnimating(false);
}, 300); }, 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 ( return (
@@ -56,40 +99,156 @@ 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" 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"> <div className="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> {!showSettings ? (
<div className="flex-1"> <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<p className="text-sm text-gray-700"> <div className="flex-1">
使 Cookie <p className="text-sm text-gray-700">
使{' '} 使 Cookie
<a 使{' '}
href="/privacy" <a
className="text-[#C41E3A] hover:text-[#A01830] underline font-medium" href="/privacy"
className="text-[#C41E3A] hover:text-[#A01830] underline font-medium"
>
</a>
</p>
</div>
<div className="flex flex-wrap gap-3 shrink-0">
<button
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"
> >
</a> </button>
<button
</p> 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>
<div className="flex gap-3 shrink-0"> ) : (
<button <div className="space-y-4">
onClick={handleDecline} <div className="flex items-center justify-between">
disabled={isAnimating} <h3 className="text-lg font-semibold text-[#1C1C1C]">Cookie </h3>
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
> onClick={() => setShowSettings(false)}
className="text-gray-500 hover:text-gray-700"
</button> aria-label="关闭设置"
<button >
onClick={handleAccept} <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
disabled={isAnimating} <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
className="px-4 py-2 text-sm font-medium text-white bg-[#C41E3A] rounded-lg hover:bg-[#A01830] transition-colors disabled:opacity-50" </svg>
> </button>
</div>
</button>
<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>
</div> )}
</div> </div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </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>
);
}
+1 -1
View File
@@ -48,7 +48,7 @@ function GoogleAnalyticsContent() {
gtag('config', '${GA_MEASUREMENT_ID}', { gtag('config', '${GA_MEASUREMENT_ID}', {
send_page_view: false, send_page_view: false,
anonymize_ip: true, anonymize_ip: true,
allow_google_signals: true, allow_google_signals: false,
allow_ad_personalization_signals: false, allow_ad_personalization_signals: false,
cookie_flags: 'SameSite=None;Secure' cookie_flags: 'SameSite=None;Secure'
}); });
@@ -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;
}
+48
View File
@@ -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) => { export const updateConsent = (granted: boolean) => {
if (typeof window !== 'undefined' && window.gtag) { if (typeof window !== 'undefined' && window.gtag) {
window.gtag('consent', 'update', { 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(),
});