张翔
6.2 KiB
6.2 KiB
Google Analytics 4 集成指南
✅ 配置状态
GA4 测量 ID: G-LGTLCR15KM
配置文件: .env.production
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
已集成：
import { GoogleAnalytics } from "@/components/analytics/GoogleAnalytics";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<body>
<GoogleAnalytics />
{children}
</body>
</html>
);
}
🎯 使用示例
1. 联系表单追踪
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 <form onSubmit={handleSubmit}>...</form>;
}
2. 按钮点击追踪
import { trackButtonClick } from '@/lib/analytics';
function CTAButton() {
const handleClick = () => {
// 追踪按钮点击
trackButtonClick('get_started', 'hero_section');
};
return <button onClick={handleClick}>开始使用</button>;
}
3. 页面浏览追踪
import { pageview } from '@/lib/analytics';
function MyPage() {
useEffect(() => {
// 追踪页面浏览
pageview('/my-page');
}, []);
return <div>My Page</div>;
}
4. 自定义事件追踪
import { event } from '@/lib/analytics';
function ProductCard({ product }) {
const handleAddToCart = () => {
// 追踪添加到购物车事件
event('add_to_cart', 'ecommerce', product.name, product.price);
};
return (
<div>
<h3>{product.name}</h3>
<button onClick={handleAddToCart}>添加到购物车</button>
</div>
);
}
📊 可追踪的指标
自动追踪
- ✅ 页面浏览（自动）
- ✅ 页面标题（自动）
- ✅ 用户会话（自动）
- ✅ 地理位置（自动）
手动追踪
- 📧 联系表单提交
- 🔘 按钮点击
- 📄 自定义页面视图
- 🎯 自定义事件
- 💰 交易/转化
🔧 配置选项
环境变量
# 必需配置
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-LGTLCR15KM
# 可选配置（在 GoogleAnalytics 组件中）
# NEXT_PUBLIC_GA_DEBUG=true # 启用调试模式
调试模式
启用调试模式查看实时数据：
// 在 src/components/analytics/GoogleAnalytics.tsx 中
const isDebug = process.env.NEXT_PUBLIC_GA_DEBUG === 'true';
if (isDebug) {
console.log('GA Debug Mode Enabled');
}
📈 数据查看
访问 Google Analytics
- 访问 https://analytics.google.com/
- 选择你的 GA4 属性
- 查看实时数据
- 分析报告和趋势
关键报告
实时报告
- 当前在线用户
- 实时事件
- 实时页面浏览
- 地理位置
受众报告
- 用户数量
- 新用户 vs 回访用户
- 用户地理位置
- 设备和浏览器
获取报告
- 用户获取渠道
- 流量来源
- 营销活动效果
- 转化路径
参与度报告
- 平均会话时长
- 每会话页面浏览
- 跳出率
- 事件追踪
🧪 测试追踪
1. 本地测试
# 启用调试模式
NEXT_PUBLIC_GA_DEBUG=true npm run dev
2. 实时验证
- 访问 Google Analytics 实时报告
- 在你的网站上执行操作
- 查看实时数据更新
3. 调试扩展
使用 Google Analytics Debugger 扩展：
- Chrome 扩展: Google Analytics Debugger
- Firefox 扩展: Google Analytics Debugger
🔒 隐私和合规
GDPR 合规
// 添加用户同意管理
function CookieConsent() {
const [consent, setConsent] = useState(false);
const handleAccept = () => {
setConsent(true);
// 用户同意后初始化 GA
if (consent) {
// GA 会自动初始化
}
};
return (
<div>
{!consent && (
<div className="fixed bottom-0 left-0 right-0 bg-gray-900 text-white p-4">
<p>我们使用 Google Analytics 来改进网站体验。</p>
<button onClick={handleAccept}>接受</button>
</div>
)}
</div>
);
}
Cookie 设置
在 Google Analytics 中配置：
- 数据保留: 14个月
- 用户数据删除: 支持用户删除请求
- IP 匿名化: 启用
📞 故障排查
问题 1: 数据不显示
解决方案：
- 检查 GA4 ID 是否正确
- 确认环境变量已设置
- 检查网络连接
- 查看浏览器控制台错误
问题 2: 实时数据延迟
解决方案：
- GA4 实时数据有 5-10 分钟延迟
- 等待一段时间后查看
- 检查时区设置
问题 3: 事件不追踪
解决方案：
- 确认调用了正确的追踪函数
- 检查事件参数是否正确
- 启用调试模式验证
📚 相关资源
🎁 示例代码
完整示例代码: src/components/examples/ContactFormAnalyticsExample.tsx
这个示例展示了如何在联系表单中集成 Google Analytics 追踪。
✅ 集成检查清单
- GA4 测量 ID 配置
- Analytics 工具库创建
- Google Analytics 组件创建
- 根布局集成
- 联系表单示例创建
- 文档更新
状态: ✅ 完全集成
Google Analytics 4 已经完全集成到项目中，现在可以追踪用户行为和访问数据了！