Google Series

| 分类 Google  | 标签 Google 

Google Analytics(GA4) 与 Google Tag Manager(GTM)

Google Analytics（GA）与 Google Tag Manager（GTM）并不是竞争或替代关系，而是协同工作的互补工具：GTM 负责采集和分发数据，GA 负责接收、存储和分析数据。

一、 核心概念

  • GTM（数据管道）：监听用户在网站或 App 上的行为（如点击按钮、滚动页面、提交表单），并将这些行为打包成“数据包裹”发送出去。GTM 本身不存储任何数据，也不提供数据分析报表。
  • GA（数据仓库 / 分析师）：接收来自 GTM 或其他渠道发来的“包裹”，把数据进行清洗、归类和计算，最后呈现在可视化仪表盘中，帮助你分析用户来源、留存和转化率。

二、 功能对比一览

维度 Google Tag Manager (GTM) Google Analytics (GA / GA4)
核心定位 标签管理系统（Tag Management System） 数据分析与报表平台（Analytics Engine）
主要职责 部署、触发和管理各类追踪代码（Tag） 存储数据，生成用户行为、流失与转化报表
数据存储 不存储任何统计数据 长期存储并处理历史数据
对外联动 可将数据同时发送给 GA、Meta Pixel、Google Ads 等 专注于对导入的数据进行深度分析与建模
典型使用者 营销人员、数据埋点工程师、前端开发 运营人员、数据分析师、增长团队、产品经理

三、 两者如何配合工作？

以用户在网站上点击“购买”按钮为例：

  1. 用户操作：用户点击了页面上的“立即购买”按钮。
  2. GTM 捕获：GTM 的触发器（Trigger）监听到该点击事件，抓取按钮名称、商品价格等参数。
  3. GTM 发送：GTM 按照配置好的规则，调用 GA4 的代码（Tag），把“购买事件”发送给 GA。
  4. GA 呈现：GA 接收到事件数据后进行汇总，更新在你的“电商转化报表”与实时分析看板中。

四、 为什么要搭配使用 GTM 和 GA？

虽然可以直接在网站源码里硬编码写入 GA 追踪代码，但通过 GTM 引入 GA 有以下优势：

  1. 无需依赖程序员频繁改代码：新增或修改一个按钮点击埋点，只需在 GTM 界面操作并发布即可，无需修改网站源码或重新上线。
  2. 多平台统一管理：一个触发规则（如“提交表单”）可以在 GTM 中同时发给 GA4、Google Ads 转化追踪以及 Facebook Pixel，避免在网站里重复嵌入多套代码。
  3. 强大的调试与预检机制：GTM 提供了 Preview（预览调试）模式，能在上线前实时验证埋点是否触发、参数传输是否正确，大幅降低埋点出错率。

如何在网站上，增加 GTM 和 GA？

在网站上同时增加 Google Tag Manager (GTM) 和 Google Analytics (GA4) 的最佳实践是：只在网站代码中嵌入 GTM，然后在 GTM 内部配置 GA4。这样可以避免重复写代码，后续需要新增其他埋点时也无需再改动网站源码。

完整配置步骤如下：

第一步：在网站上安装 GTM 代码

  1. 获取 GTM 代码：

    • 登录 Google Tag Manager。

    • 进入你的 GTM 容器，点击右上角的容器 ID（如 GTM-XXXXXXX），弹窗中会展示两段代码：

    • 第一段代码（<head> 标记）：

      <!-- Google Tag Manager -->
<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>
<!-- End Google Tag Manager -->

    • 第二段代码（<body> 标记）：

      <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

  2. 粘贴到网站源码中：

    • 将第一段代码粘贴到每个页面的 <head> 标签内。
    • 将第二段代码粘贴到每个页面的 <body> 开始标签正下方。
    • 注：如果使用的是 Jekyll / GitHub Pages 网站，建议将第一段放入 _includes/head.html（或 _layouts/default.html 的 <head> 中），将第二段放入 _layouts/default.html 的 <body> 开头。

第二步：在 GTM 中配置 GA4

无需在网站中直接粘贴 GA4 的代码，直接在 GTM 平台操作即可：

  1. 获取 GA4 衡量 ID（Measurement ID）：
    • 登录 Google Analytics。
    • 点击左下角 管理（Admin） $\rightarrow$ 数据流（Data Streams） $\rightarrow$ 选择你的网站数据流。
    • 复制右侧以 G- 开头的衡量 ID（如 G-XXXXXXXXXX）。
  2. 在 GTM 中新建 GA4 标签：
    • 返回 GTM 后台，进入左侧菜单 标签 (Tags) $\rightarrow$ 点击右上角 新建 (New)。
    • 点击 标签配置 (Tag Configuration) $\rightarrow$ 选择 Google 代码 (Google Tag)。
    • 在 标签 ID (Tag ID) 输入框中，粘贴刚才复制的 GA4 衡量 ID（G-XXXXXXXXXX）。
    • 点击 触发条件 (Triggering) $\rightarrow$ 选择 Initialization - All Pages（初始化 - 所有页面）或 All Pages。
    • 给标签命名（如 GA4 - Google Tag），然后点击 保存 (Save)。

第三步：测试与发布

  1. 使用 GTM 预览调试：
    • 在 GTM 界面右上角点击 Preview（预览）。
    • 输入你的网站网址，点击 Connect 打开测试页面。
    • 在打开的 Tag Assistant 调试界面中，检查刚才创建的 GA4 标签是否显示在 Tags Fired 列表中。
  2. 提交并发布：
    • 回到 GTM 主界面，点击右上角的 Submit（提交） 按钮。
    • 填写版本名称（如 添加 GA4 追踪），点击 Publish（发布）。
  3. 在 GA4 中验证数据：
    • 打开 GA4 后台，进入 报告 (Reports) $\rightarrow$ 实时 (Realtime)。
    • 在浏览器中访问你的网站，查看 GA4 实时报表中是否出现了 1 个活跃用户。如果能看到访问记录，说明已经配置成功。

在 GTM 中定义事件

GA4 默认只在滚动到 90% 时触发。自定义事件可以更精确地识别读者是在“浅尝辄止”还是“认真阅读”。

在 GTM 中配置一个 scroll_depth（阶段滚动）事件，触发场景：读者向下滚动页面到达 25%、50%、75%、90%。

步骤 1：新建触发器（Trigger）

  1. 在 GTM 左侧导航栏点击 触发器（Triggers） $\rightarrow$ 点击 新建（New）。
  2. 点击触发器配置，选择类型：滚动深度（Scroll Depth）。
  3. 勾选 垂直滚动深度（Vertical Scroll Depths）。
  4. 在“百分比”框中输入：25, 50, 75, 90。
  5. 触发时机（Enable this trigger on） 选择框，勾选 Window Load(gtm.load)
  6. 保存触发器。
  7. 触发器名称命名为：Scroll Depth - 25 50 75 90。

触发时机（Enable this trigger on）的区别

1. Window Load (gtm.load)（强烈推荐）

  • 触发时机：等待网页的所有资源（包括 HTML 结构、CSS 样式、图片、字体等）完全加载完毕后，才开始监控用户的滚动行为。
  • 为什么选它：滚动深度（25%、50%、75%、90%）的计算非常依赖页面的真实总高度。如果图片或代码块样式还没加载完就启动监控，后续加载出来的图片会拉长页面，导致算出来的百分比失真。使用 Window Load 可以确保获取到最准确的页面总高度。

2. DOM Ready (gtm.dom)

  • 触发时机：HTML 结构解析完成后（DOM 树构建完毕）立即启动监控，不等待图片和外部资源加载。
  • 适用场景：适用于纯文本、完全没有图片且页面高度固定不变的极简页面。对于包含图片或代码块的技术文章，不建议使用。

3. Container Loaded (gtm.js)

  • 触发时机：GTM 基础代码刚一载入就启动监控。
  • 不推荐：此时页面的 DOM 结构可能都还没渲染完成，无法准确计算页面高度。

步骤 2：新建 GA4 事件标签（Tag）

  1. 在左侧导航栏点击 标签（Tags） $\rightarrow$ 点击 新建（New）。
  2. 标签类型选择：Google Analytics: GA4 事件 (Google Analytics: GA4 Event)。
  3. 数据流 ID / 标签 ID：输入你的 GA4 衡量 ID（G-XXXXXXXXXX）。
  4. 事件名称 (Event Name)：输入 scroll_depth。
  5. 事件参数 (Event Parameters)：
    • 参数名称：depth_threshold
    • 参数值：点击右侧加号，选择变量 ``（如果在列表中没找到，可以在右上角的内置变量中勾选开启）。
  6. 触发条件 (Triggering)：选择刚刚创建的 Scroll Depth - 25 50 75 90 触发器。
  7. 点击 保存 (Save)。
  8. 标签名称命名为：GA4 Event - Scroll Depth。

在 GA4 中搭建报表

在 GA4 的 Explorations（探索） 中搭建“过去 30 天页面 Views 和 Active Users 看板”

1. 创建新的空白探索

  1. 点击左侧菜单栏的 Explorations（探索） 图标。
  2. 点击 Blank（空白探索） 新建一个画布。
  3. 在左上角的名称处，将标题修改为 “过去30天页面流量看板”（或自定义名称）。

2. 选择时间范围为过去 30 天

  1. 在第一列 Variables（变量） 的顶部，找到 Date range（日期范围）。
  2. 点击日期，在弹出的下拉菜单中选择 Last 30 days（过去 30 天）。
  3. 点击 Apply（应用）。

3.导入维度（Dimensions）与指标（Metrics）

  • 选择维度：
    • 在 Dimensions（维度） 右侧点击 + 号。
    • 搜索并勾选 Page path and screen class（页面路径）或 Page title and screen class（页面标题）。
  • 导入指标：
    • 在 Metrics（指标） 右侧点击 + 号。
    • 搜索并勾选 Views（浏览量）。
    • 搜索并勾选 Active users（活跃用户数）。

4. 拖拽配置明细数据表

  • 将左侧 Page path and screen class 拖入第二列（Tab settings）的 Rows（行） 区域。
  • 将左侧 Views 和 Active users 依次拖入第二列的 Values（值） 区域。

探索（Explorations）：走的是离线批处理通道。GA4 需要将收到的事件进行清洗、归类和维度聚合，新产生的数据（尤其是刚搭建的前几十分钟数据）通常需要 24 到 48 小时 才会刷新进探索看板中。

5.增加过去 30 天的每日趋势折线图

如果你还想看这 30 天内每天的流量变化趋势：

  1. 点击画布顶部的 + 号，新增一个 Tab（标签页）。
  2. 在 Technique（分析技术） 或 Visualisation（可视化） 中选择 Line chart（折线图）。
  3. 关闭面板中的 ANOMALY DETECTION（异常检测） 功能。在 GA4 中，算法模型在计算数据的“异常波动”时，只能针对单个指标进行智能建模。一旦开启了异常检测，GA4 会强制限制 Values 只能容纳 1 个指标。
  4. 将指标 Views 和 Active users 拖入 Values（值） 区域。
  5. 确保 Granularity（粒度） 选择为 Day（天）。

Explorations 中的 Technique（分析技术）中的各个选项

Technique 是 GA4 探索（Explorations）中最核心的模式选择器，它决定了你用什么分析模型来观察数据：

选项名称 中文名称 作用与适用场景
Free-form 自由形式 最常用、最灵活的模式。支持将维度和指标组合成数据透视表、条形图、折线图、散点图或饼图。
Cohort exploration 同期群探索 观察特定人群在一段时间内的留存和行为变化。例如：8月第一周进来的新读者，在第2周、第3周还有多少人回访？
Funnel exploration 漏斗探索 分析多步骤流程的流失率。例如分析：访问首页 $\rightarrow$ 点击文章 $\rightarrow$ 复制代码 这一流程中每一步流失了百分之多少的人。
Segment overlap 受众群体重叠 对比不同人群的交集（用维恩图展示）。例如查看“手机端用户”、“来自 Google 搜索的用户”和“阅读了 StarRocks 文章的用户”这三类人的重叠比例。
Path exploration 路径探索 查看读者的行为轨迹（树状流向图）。例如：读者打开博客首页后，接下来最常点击的是哪一篇文章？看完文章后又去了哪里？
User explorer 用户探索 深入分析单个匿名用户的具体行为历史。可以按时间线查看某个特定访客在你的网站上点击的每一个事件和页面。
User lifetime 用户生命周期 计算用户的长期价值（LTV）。分析用户从第一次访问你网站至今，累计贡献的总浏览量、总互动时长等。

Settings 面板中的其他选项

  1. GRANULARITY（时间粒度）：
    • 决定折线图横坐标的时间间隔。可选：Hour（小时）、Day（天，如截图所示）、Week（周）、Month（月）。
  2. BREAKDOWNS（拆分维度）：
    • 按某维度把折线拆成多条线。例如：把 Device category（设备类型）拖进来，折线图就会拆分成 Mobile（手机）、Desktop（电脑）等多条对比折线。
  3. LINES PER DIMENSION（每个维度的显示折线数）：
    • 当使用 BREAKDOWNS 拆分维度时，限制图上最多展示几条线（如默认的 10 条），防止线太多导致画面过于凌乱。
  4. ANOMALY DETECTION（异常检测）相关项：
    • 开关：开启后，GA4 会用机器学习算法在折线图上标注出出乎意料的流量暴涨或暴跌。
    • TRAINING PERIOD（训练周期）：算法参考过去多少天的数据（如 32 天）来判断今天的流量“正不正常”。
    • SENSITIVITY（敏感度）：调得越高，稍微有点流量波动就会被标记为“异常”。
  5. FILTERS（过滤器）：
    • 数据过滤条件。例如：如果你只想看包含 /posts/ 路径的文章流量，可以在这里添加 Page path 包含 /posts/ 的过滤规则。

上一篇     下一篇