Google Analytics 4 深度解析完全指南

Google Analytics 4 简介

Google Analytics 4（GA4）是 Google 推出的新一代分析平台，与传统的 Universal Analytics（UA）相比有重大改变：

特性	Universal Analytics	Google Analytics 4
数据模型	基于会话（Session）	基于事件（Event）
跨平台	仅支持网页	网页 + App 统一
用户识别	Cookie 为主	多信号融合
隐私合规	依赖第三方 Cookie	无 Cookie 预测
AI 能力	基础	深度机器学习

从 2024 年 7 月起，Universal Analytics 已完全停止处理数据，GA4 成为唯一选择。

基础配置

创建 GA4 属性

访问 Google Analytics
点击"管理" → "创建属性"
填写属性名称、时区、币种
选择业务目标（影响默认报表配置）
创建数据流（Web / iOS / Android）

安装追踪代码

方式一：直接安装 gtag.js

<!-- 放在 <head> 中尽早加载 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

方式二：通过 Google Tag Manager（推荐）

<!-- GTM 代码片段 -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

方式三：Nuxt 项目集成

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX',
          async: true
        }
      ]
    }
  },
  
  runtimeConfig: {
    public: {
      gaId: 'G-XXXXXXXXXX'
    }
  }
})

// plugins/gtag.client.js
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  
  window.dataLayer = window.dataLayer || []
  function gtag() { dataLayer.push(arguments) }
  
  gtag('js', new Date())
  gtag('config', config.public.gaId)
  
  // 暴露给全局使用
  return {
    provide: {
      gtag
    }
  }
})

事件追踪体系

事件类型分类

GA4 中所有数据都是事件，分为四类：

类型	说明	示例
自动收集事件	GA4 自动采集	page_view, first_visit, session_start
增强测量事件	可开关的自动事件	scroll, outbound_click, file_download
推荐事件	Google 预定义事件	login, sign_up, purchase
自定义事件	完全自定义	任意业务事件

增强测量配置

在 GA4 管理后台开启增强测量：

页面浏览 - 包含历史记录变更追踪（SPA 友好）
滚动 - 用户滚动到页面 90% 时触发
出站点击 - 点击外部链接
站内搜索 - 使用 ?q= 等参数的搜索
视频互动 - YouTube 嵌入视频的播放追踪
文件下载 - 常见文件类型的下载追踪

自定义事件实现

// 推荐事件：用户注册
const trackSignUp = (method) => {
  gtag('event', 'sign_up', {
    method: method  // 'email', 'google', 'wechat'
  })
}

// 推荐事件：购买
const trackPurchase = (order) => {
  gtag('event', 'purchase', {
    transaction_id: order.id,
    value: order.total,
    currency: 'CNY',
    items: order.items.map(item => ({
      item_id: item.sku,
      item_name: item.name,
      price: item.price,
      quantity: item.quantity
    }))
  })
}

// 自定义事件：文章阅读进度
const trackReadProgress = (articleId, percentage) => {
  gtag('event', 'article_read_progress', {
    article_id: articleId,
    progress: percentage  // 25, 50, 75, 100
  })
}

// 自定义事件：功能使用
const trackFeatureUse = (featureName, action) => {
  gtag('event', 'feature_use', {
    feature_name: featureName,
    action: action
  })
}

事件参数与用户属性

// 设置用户属性
gtag('set', 'user_properties', {
  user_type: 'premium',
  preferred_language: 'zh-CN',
  signup_date: '2024-01-15'
})

// 事件可以携带自定义参数（最多25个）
gtag('event', 'course_complete', {
  course_id: 'vue3-basics',
  course_name: 'Vue 3 基础教程',
  duration_minutes: 120,
  completion_rate: 100,
  certificate_earned: true
})

转化设置

创建转化事件

进入 GA4 管理后台
点击"事件" → 找到目标事件
开启"标记为转化"开关

重要转化事件示例：

sign_up - 用户注册
purchase - 完成购买
generate_lead - 提交表单
add_to_cart - 加入购物车

自定义转化条件

通过事件参数创建更精确的转化：

// 追踪高价值注册（来自付费推广）
gtag('event', 'sign_up', {
  method: 'email',
  source: 'paid_ads',
  campaign: 'summer_sale'
})

// 在 GA4 后台创建基于参数的转化条件：
// event_name = 'sign_up' AND source = 'paid_ads'

转化归因

GA4 提供多种归因模型：

归因模型	说明	适用场景
数据驱动	机器学习分配权重	推荐默认使用
最终点击	100%归因最后触点	直接响应营销
首次点击	100%归因首次触点	品牌认知评估
线性	平均分配	全渠道评估
时间衰减	越近权重越高	短周期决策

受众群体

创建自定义受众

受众群体用于分析细分用户和再营销：

// 示例：高价值用户受众
条件：
- 事件：purchase
- 参数：value > 1000
- 时间范围：过去30天
- 成员时效：90天

常用受众配置

受众名称	条件设置
注册未购买	sign_up 发生 AND purchase 未发生
流失用户	过去30天无会话
忠实用户	过去30天 ≥5次会话
高意向用户	add_to_cart 发生 AND purchase 未发生（7天内）

预测受众

GA4 的机器学习可预测用户行为：

可能7天内购买 - 预测购买意向用户
可能7天内流失 - 预测可能离开的用户
预测收入 - 预计未来28天内产生的收入

启用条件：过去28天内每天至少1000个回访用户。

报表解读

实时报表

监控当前在线用户活动：

关键指标：
- 过去30分钟用户数
- 每分钟用户趋势
- 用户来源（地理位置、流量来源）
- 正在查看的页面
- 触发的事件

生命周期报表

获取报表

用户获取渠道分布
新用户 vs 回访用户
首次访问转化率

互动报表

平均互动时长
参与会话数
每个用户的事件数

变现报表

总收入和收入趋势
每用户平均收入（ARPU）
购买者转化率

留存报表

新用户留存曲线
用户生命周期价值

自定义报表

创建符合业务需求的报表：

// 探索报表配置示例
const explorationConfig = {
  // 自由形式探索
  technique: 'free_form',
  
  // 维度
  dimensions: [
    'event_name',
    'page_location',
    'source_medium'
  ],
  
  // 指标
  metrics: [
    'event_count',
    'total_users',
    'engagement_rate',
    'conversions'
  ],
  
  // 过滤器
  filters: [
    { dimension: 'country', value: 'China' },
    { dimension: 'device_category', value: 'mobile' }
  ],
  
  // 日期范围
  dateRange: 'last_30_days'
}

与 Nuxt 深度集成

SPA 路由追踪

确保单页应用的页面浏览正确追踪：

// plugins/gtag.client.js
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const router = useRouter()
  
  // 初始化
  window.dataLayer = window.dataLayer || []
  function gtag() { dataLayer.push(arguments) }
  
  gtag('js', new Date())
  gtag('config', config.public.gaId, {
    send_page_view: false  // 禁用自动页面追踪
  })
  
  // 路由变更时手动发送
  router.afterEach((to) => {
    gtag('event', 'page_view', {
      page_title: document.title,
      page_location: window.location.href,
      page_path: to.fullPath
    })
  })
  
  return { provide: { gtag } }
})

追踪组合式函数

// composables/useAnalytics.js
export const useAnalytics = () => {
  const { $gtag } = useNuxtApp()
  
  // 追踪事件
  const trackEvent = (eventName, params = {}) => {
    $gtag('event', eventName, params)
  }
  
  // 追踪页面浏览时长
  const trackTimeOnPage = () => {
    const startTime = Date.now()
    
    onUnmounted(() => {
      const duration = Math.round((Date.now() - startTime) / 1000)
      trackEvent('time_on_page', {
        page_path: useRoute().fullPath,
        duration_seconds: duration
      })
    })
  }
  
  // 追踪滚动深度
  const trackScrollDepth = () => {
    const milestones = [25, 50, 75, 100]
    const reached = new Set()
    
    const handleScroll = () => {
      const scrollPercent = Math.round(
        (window.scrollY + window.innerHeight) / 
        document.documentElement.scrollHeight * 100
      )
      
      milestones.forEach(milestone => {
        if (scrollPercent >= milestone && !reached.has(milestone)) {
          reached.add(milestone)
          trackEvent('scroll_depth', {
            page_path: useRoute().fullPath,
            percent: milestone
          })
        }
      })
    }
    
    onMounted(() => {
      window.addEventListener('scroll', handleScroll, { passive: true })
    })
    
    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })
  }
  
  return {
    trackEvent,
    trackTimeOnPage,
    trackScrollDepth
  }
}

电商追踪集成

// 商品列表展示
const trackViewItemList = (items, listName) => {
  gtag('event', 'view_item_list', {
    item_list_id: listName,
    item_list_name: listName,
    items: items.map((item, index) => ({
      item_id: item.id,
      item_name: item.name,
      price: item.price,
      index: index
    }))
  })
}

// 商品详情查看
const trackViewItem = (product) => {
  gtag('event', 'view_item', {
    currency: 'CNY',
    value: product.price,
    items: [{
      item_id: product.id,
      item_name: product.name,
      price: product.price,
      item_category: product.category
    }]
  })
}

// 完整购买流程
const trackCheckout = (cart, step) => {
  const eventMap = {
    1: 'begin_checkout',
    2: 'add_shipping_info',
    3: 'add_payment_info'
  }
  
  gtag('event', eventMap[step], {
    currency: 'CNY',
    value: cart.total,
    items: cart.items.map(item => ({
      item_id: item.id,
      item_name: item.name,
      price: item.price,
      quantity: item.quantity
    }))
  })
}

数据分析最佳实践

设置数据过滤

排除内部流量和测试数据：

// 方式1：通过 IP 过滤（在 GA4 后台设置）
// 管理 → 数据流 → 配置标记设置 → 定义内部流量

// 方式2：通过参数标记
if (process.env.NODE_ENV === 'development') {
  gtag('config', 'G-XXXXXXXXXX', {
    debug_mode: true,
    traffic_type: 'internal'
  })
}

数据保留设置

默认数据保留期为 2 个月，建议调整：

进入管理 → 数据设置 → 数据保留
设置事件数据保留为 14 个月
开启"重置新活动时的用户数据"

UTM 参数规范

统一管理流量来源标记：

// UTM 参数规范
const utmParams = {
  // 必填
  utm_source: 'newsletter',     // 流量来源
  utm_medium: 'email',          // 媒介类型
  utm_campaign: 'summer_sale',  // 营销活动
  
  // 选填
  utm_content: 'cta_button',    // 区分同一广告的变体
  utm_term: 'vue教程'           // 付费关键词
}

// 生成带参数的 URL
const buildUtmUrl = (baseUrl, params) => {
  const url = new URL(baseUrl)
  Object.entries(params).forEach(([key, value]) => {
    url.searchParams.set(key, value)
  })
  return url.toString()
}

常见问题排查

数据未显示

检查代码安装 - 使用 Chrome 扩展 "Tag Assistant" 验证
查看实时报表 - 新数据应在几秒内出现
检查过滤器 - 确认没有过滤掉自己的流量
Debug 模式 - 使用 GA4 DebugView 调试

// 启用 Debug 模式
gtag('config', 'G-XXXXXXXXXX', {
  debug_mode: true
})

跨域追踪

多个域名需要关联追踪：

gtag('config', 'G-XXXXXXXXXX', {
  linker: {
    domains: ['example.com', 'shop.example.com', 'blog.example.com']
  }
})

事件参数限制

注意 GA4 的限制：

限制项	最大值
每个事件的参数数量	25 个
参数名长度	40 字符
参数值长度	100 字符
唯一事件名称	500 个
用户属性数量	25 个

总结

Google Analytics 4 是现代网站分析的核心工具。关键要点：

基于事件的数据模型 - 灵活追踪任何用户行为
跨平台统一分析 - 网页和 App 数据整合
智能预测能力 - 机器学习辅助决策
隐私友好设计 - 适应无 Cookie 未来

建立完善的数据追踪体系后，持续分析用户行为，用数据驱动产品优化和营销决策。