更新时间：2024年7月6号
dataLayer.push() 是GTM中最常见、也是最推荐的事件跟踪方式之一。
dataLayer.push() 可以让前端主动把事件和相关数据发送到数据层，再由GTM统一接收并发送至GA4，具有代码解耦、维护简单、扩展方便等优点。
本文介绍如何利用 dataLayer.push + GTM 实现一个完整的GA4自定义事件跟踪。
工作原理
整体流程如下：
用户操作 → JavaScript执行dataLayer.push() → GTM自定义事件触发器监听事件 → GA4事件标签发送数据 → GA4接收并生成报表
整个过程中：
- 前端负责把数据推送到Data Layer。
- GTM负责读取数据并触发标签。
- GA4负责接收事件并生成分析报表。
这种方式也是目前电商网站、SPA（单页应用）以及大型项目最常见的实现方案。
配置过程
假设需要对某个按钮点击进行事件跟踪：
Step 1：前端添加 dataLayer.push
前端在用户点击按钮后执行：
dataLayer.push({
event: "test",
pageType: "product"
});
其中：
- event：事件名称，GTM将通过它触发对应的标签。
- pageType：需要传递给GA4的事件参数。
将上述代码添加到目标按钮点击事件中即可，将其添加到需要跟位置为止后的效果为：
Step 2：创建数据层变量
GTM中点击「变量」—「新建」—「选择一个变量类型以开始设置」——「数据层变量」，命名为“Page Type”，做如下设置
Step 3：创建自定义事件触发器
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」——「自定义事件」，然后做如下设置：
dataLayer.push里的event的值是什么，事件名称就填写什么。
Step 4：创建GA4事件代码
接下来就是设置代码。
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」——「Google Analytics：GA4 事件」，然后做如下设置：
这样当event=test被推送时，GA4就会发送一个新的事件。
Step 5 ： 预览测试
完成配置后，点击 GTM 右上角的 预览，就可以在 Tag Assissant 里测试：
可以看到设置的代码是触发成功，点击查看事件参数page_type：
事件参数的值准确，可以发布。
Step 6：创建GA4自定义维度
如果希望在 GA4 报表中查看page_type参数，需要注册对应的自定义维度。
在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：
Step 7 ： 数据验证
GA4 通常会在数小时内开始接收数据，标准报告一般需要24小时左右 才会完整显示，可以在事件报告中找到“dataLayer demo”事件：
使用场景
dataLayer.push() 几乎适用于所有需要自定义事件的场景，尤其包括：
- 电商事件跟踪（商品浏览、加入购物车、购买等），这是最常见的应用场景。
- SPA（单页应用）跟踪，例如 React、Vue、Angular 等前端框架。
- 复杂交互行为跟踪，例如 AJAX、动态弹窗、无限滚动等，无法通过普通点击触发器实现时，可以主动推送事件。
- 前后端分离项目，由前端统一负责数据推送，GTM 负责事件发送，职责更加清晰。
总结
dataLayer.push() 是 GTM 官方推荐的事件跟踪方式，也是企业级网站中最常见的实现方案。
它能够将前端业务逻辑与数据采集解耦，既方便开发协作，也便于后期维护和扩展。对于电商网站、SPA 应用以及各种复杂交互场景，使用 dataLayer.push + GTM + GA4 是一种稳定且可扩展的最佳实践。
