更新时间：2024年7月3号
在实际网站分析过程中，经常会遇到需要跟踪大量页面元素的情况，例如：
- 导航栏不同栏目点击次数；
- 首页不同 Banner 点击次数；
- 注册流程中每个输入框填写情况；
- 不同按钮点击行为。
如果采用页面元素定位方式（例如 CSS Selector、ID、Class、文本匹配），通常需要：
- 创建大量 GTM 触发条件；
- 编写大量自定义代码；
- 页面改版后容易失效；
- 后期维护成本较高。
特别是在大型网站中，同类型元素数量很多，这种方式会导致 GTM 容器越来越复杂。
针对这种情况，可以采用自定义HTML属性（ga-data）方式 实现批量事件跟踪。
这种方式最大的优势：
- 一个触发条件可以管理多个元素；
- 一个 GA4事件代码可以发送多个事件数据；
- 新增跟踪点只需要修改HTML属性（新增 ga-data 属性）；
- 不需要频繁修改GTM配置。
什么是ga-data属性
首先需要说明：ga-data 并不是GA4官方属性，而是一种自定义 HTML 属性命名方式。
例如：
<a href="/product" ga-data="product_nav">
产品中心
</a>这里：
ga-data="product_nav"就是我们人为定义的跟踪标识。
点击该元素后，GTM可以读取这个值，并发送到GA4。
实现原理
在需要跟踪的元素上添加统一的ga-data属性值，然后利用自定义 JavaScript 动态获取该属性值，并通过映射关系将属性值转换为具体的业务行为。随后，在 GTM Trigger 中基于属性值设置触发条件，创建一个通用 Tag 即可覆盖多个元素和多个事件的跟踪需求，从而减少 Tag 数量，提升事件管理效率和维护性。
GTM实现流程
Step 1 : 添加ga-data属性
首先在需要跟踪的位置添加 ga-data 属性，不同的位置添加不同的数值，添加后的效果如下所示：
Step 2 : GTM中获取ga-data属性
在GTM中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「自定义JavaScript」，做如下设置：
需要注意：上面的代码中还引用了element这个变量，所以你在变量中还需要开启element变量，element是自动事件变量，做如下设置：
Step 3 ：设置对照表转换
在GTM中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「对照表」，做如下设置：
将前面获取的ga-data的属性里面的具体数值转化成对应的具体行为，一般数值范围选用顺序构造，方便后面设置触发条件的时候确定促发条件
Step 4 ：设置触发条件
在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「点击-所有元素」，做如下设置：
Step 5 ：设置GA4事件
在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，做如下设置：
Step 6 ：测试发布
配置好后，还需要在 GTM 里预览调试，在GTM 里点击「预览」，打开页面后，模拟所需测试的行为，再返回到Tag Assistant，看是否有发送事件，代码是否有触发：
可以看到GA4事件出发成功。
Step 7 ：注册事件参数
在GA4中注册事件参数，就可以在GA4报告中使用该维度。
Step 8 ：数据验证
一般是24小时后，可以在GA4中看到数据，可以在事件报告中找到“ga-data”事件：
ga-data方案适用场景
推荐：
- ✅ 导航点击跟踪
- ✅ Banner点击跟踪
- ✅ CTA按钮跟踪
- ✅ 表单字段跟踪
- ✅ 电商页面大量商品按钮跟踪
不太适合：
- ❌ 页面结构完全无法控制
- ❌ 第三方iframe内容
- ❌ 不允许修改HTML代码的网站
总结
相比传统的元素定位方式，ga-data是一种更加工程化的GA4事件跟踪方案。
它的核心思想是：
将跟踪标识直接写入页面元素，通过GTM统一读取和管理，而不是在GTM中维护大量复杂规则。
对于大型网站、商城、内容平台来说，这种方式能够明显降低事件部署和维护成本。
