chore: remove GitHub Actions workflows, use Woodpecker CI exclusively

2026-03-10 13:10:11 +08:00
parent 0a1adfc2a2
commit e8dffa4f05
82 changed files with 19565 additions and 101 deletions
@@ -0,0 +1,309 @@
+# 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 (
+    <html>
+      <body>
+        <GoogleAnalytics />
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+
+## 🎯 使用示例
+
+### 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 <form onSubmit={handleSubmit}>...</form>;
+}
+```
+
+### 2. 按钮点击追踪
+
+```typescript
+import { trackButtonClick } from '@/lib/analytics';
+
+function CTAButton() {
+  const handleClick = () => {
+    // 追踪按钮点击
+    trackButtonClick('get_started', 'hero_section');
+  };
+
+  return <button onClick={handleClick}>开始使用</button>;
+}
+```
+
+### 3. 页面浏览追踪
+
+```typescript
+import { pageview } from '@/lib/analytics';
+
+function MyPage() {
+  useEffect(() => {
+    // 追踪页面浏览
+    pageview('/my-page');
+  }, []);
+
+  return <div>My Page</div>;
+}
+```
+
+### 4. 自定义事件追踪
+
+```typescript
+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>
+  );
+}
+```
+
+## 📊 可追踪的指标
+
+### 自动追踪
+- ✅ 页面浏览（自动）
+- ✅ 页面标题（自动）
+- ✅ 用户会话（自动）
+- ✅ 地理位置（自动）
+
+### 手动追踪
+- 📧 联系表单提交
+- 🔘 按钮点击
+- 📄 自定义页面视图
+- 🎯 自定义事件
+- 💰 交易/转化
+
+## 🔧 配置选项
+
+### 环境变量
+
+```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 (
+    <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: 数据不显示
+
+**解决方案：**
+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 已经完全集成到项目中，现在可以追踪用户行为和访问数据了！