# Google Analytics 4 集成指南 ## ✅ 配置状态 **GA4 测量 ID**: `G-LGTLCR15KM` **配置文件**: `.env.production` ```env NEXT_PUBLIC_GA_MEASUREMENT_ID=G-LGTLCR15KM ``` ## 📋 集成组件 ### 1. Analytics 工具库文件位置: `src/lib/analytics.ts` **提供的功能：** - `pageview(url)` - 页面浏览追踪 - `event(action, category, label?, value?)` - 事件追踪 - `trackContactForm(formData)` - 联系表单提交追踪 - `trackButtonClick(buttonName, location)` - 按钮点击追踪 - `trackPageView(pageTitle, pagePath)` - 页面视图追踪 ### 2. Google Analytics 组件文件位置: `src/components/analytics/GoogleAnalytics.tsx` **功能：** - 自动初始化 GA4 - 配置全局追踪 - 在所有页面启用追踪 ### 3. 根布局集成文件位置: `src/app/layout.tsx` **已集成：** ```typescript import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics"; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` ## 🎯 使用示例 ### 1. 联系表单追踪 ```typescript import { trackContactForm } from '@/lib/analytics'; function ContactForm() { const handleSubmit = async (formData: FormData) => { // 追踪表单提交 trackContactForm({ name: formData.get('name'), email: formData.get('email'), phone: formData.get('phone'), company: formData.get('company'), message: formData.get('message') }); // 提交表单... }; return ; } ``` ### 2. 按钮点击追踪 ```typescript import { trackButtonClick } from '@/lib/analytics'; function CTAButton() { const handleClick = () => { // 追踪按钮点击 trackButtonClick('get_started', 'hero_section'); }; return ; } ``` ### 3. 页面浏览追踪 ```typescript import { pageview } from '@/lib/analytics'; function MyPage() { useEffect(() => { // 追踪页面浏览 pageview('/my-page'); }, []); return

My Page

; } ``` ### 4. 自定义事件追踪 ```typescript import { event } from '@/lib/analytics'; function ProductCard({ product }) { const handleAddToCart = () => { // 追踪添加到购物车事件 event('add_to_cart', 'ecommerce', product.name, product.price); }; return (

{product.name}

); } ``` ## 📊 可追踪的指标 ### 自动追踪 - ✅ 页面浏览（自动） - ✅ 页面标题（自动） - ✅ 用户会话（自动） - ✅ 地理位置（自动） ### 手动追踪 - 📧 联系表单提交 - 🔘 按钮点击 - 📄 自定义页面视图 - 🎯 自定义事件 - 💰 交易/转化 ## 🔧 配置选项 ### 环境变量 ```env # 必需配置 NEXT_PUBLIC_GA_MEASUREMENT_ID=G-LGTLCR15KM # 可选配置（在 GoogleAnalytics 组件中） # NEXT_PUBLIC_GA_DEBUG=true # 启用调试模式 ``` ### 调试模式启用调试模式查看实时数据： ```typescript // 在 src/components/analytics/GoogleAnalytics.tsx 中 const isDebug = process.env.NEXT_PUBLIC_GA_DEBUG === 'true'; if (isDebug) { console.log('GA Debug Mode Enabled'); } ``` ## 📈 数据查看 ### 访问 Google Analytics 1. 访问 https://analytics.google.com/ 2. 选择你的 GA4 属性 3. 查看实时数据 4. 分析报告和趋势 ### 关键报告 #### **实时报告** - 当前在线用户 - 实时事件 - 实时页面浏览 - 地理位置 #### **受众报告** - 用户数量 - 新用户 vs 回访用户 - 用户地理位置 - 设备和浏览器 #### **获取报告** - 用户获取渠道 - 流量来源 - 营销活动效果 - 转化路径 #### **参与度报告** - 平均会话时长 - 每会话页面浏览 - 跳出率 - 事件追踪 ## 🧪 测试追踪 ### 1. 本地测试 ```bash # 启用调试模式 NEXT_PUBLIC_GA_DEBUG=true npm run dev ``` ### 2. 实时验证 1. 访问 Google Analytics 实时报告 2. 在你的网站上执行操作 3. 查看实时数据更新 ### 3. 调试扩展使用 Google Analytics Debugger 扩展： - Chrome 扩展: Google Analytics Debugger - Firefox 扩展: Google Analytics Debugger ## 🔒 隐私和合规 ### GDPR 合规 ```typescript // 添加用户同意管理 function CookieConsent() { const [consent, setConsent] = useState(false); const handleAccept = () => { setConsent(true); // 用户同意后初始化 GA if (consent) { // GA 会自动初始化 } }; return (

{!consent && (

我们使用 Google Analytics 来改进网站体验。

)}

); } ``` ### Cookie 设置在 Google Analytics 中配置： - 数据保留: 14个月 - 用户数据删除: 支持用户删除请求 - IP 匿名化: 启用 ## 📞 故障排查 ### 问题 1: 数据不显示 **解决方案：** 1. 检查 GA4 ID 是否正确 2. 确认环境变量已设置 3. 检查网络连接 4. 查看浏览器控制台错误 ### 问题 2: 实时数据延迟 **解决方案：** 1. GA4 实时数据有 5-10 分钟延迟 2. 等待一段时间后查看 3. 检查时区设置 ### 问题 3: 事件不追踪 **解决方案：** 1. 确认调用了正确的追踪函数 2. 检查事件参数是否正确 3. 启用调试模式验证 ## 📚 相关资源 - [Google Analytics 4 文档](https://support.google.com/analytics/answer/9304153) - [GA4 迁移指南](https://support.google.com/analytics/answer/10110506) - [事件追踪最佳实践](https://support.google.com/analytics/answer/10089681) ## 🎁 示例代码完整示例代码: `src/components/examples/ContactFormAnalyticsExample.tsx` 这个示例展示了如何在联系表单中集成 Google Analytics 追踪。 ## ✅ 集成检查清单 - [x] GA4 测量 ID 配置 - [x] Analytics 工具库创建 - [x] Google Analytics 组件创建 - [x] 根布局集成 - [x] 联系表单示例创建 - [x] 文档更新 **状态**: ✅ 完全集成 Google Analytics 4 已经完全集成到项目中，现在可以追踪用户行为和访问数据了！