如何通过在页面元素添加ga-data跟踪用户行为

更新时间：2024年7月3号

在实际使用过程中，有时候需要知道导航栏不同栏目有多少人点击，注册表单每个输入框有多少人填写了，像这类量大的，如果通过页面元素定的方式，需要设置很多个触发器和代码，有时候甚至页面元素由于页面架构原因定位不了的情况存在，而且不便于管理，在这里可以使用ga-data的方式实现上述目标，而且方便管理。

原理

在需要跟踪的位置添加固定属性值，然后通过自定义js获取页面固定属性的数值，再将数值通过对照表转义成对应的具体行为，在Trigger通过设置数值范围设置促发条件，新建一个Tag即可触发多个事件跟踪。

实现流程

接下来看看具体的实现过程：

Step 1 : 添加ga-data属性

在页面上加ga-data属性，将鼠标移至需要监控的位置，点击右键查看具体代码位置加入ga-data属性，不同的位置添加不同的数值，添加后的效果如下所示：

Step 2 : GTM中获取ga-data属性

在GTM中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「自定义JavaScript」，做如下设置：

源码如下：

function() {
	var elem = {{element}},
	    attr = "ga-data", // change this to the attribute that you want to get
        result = (elem.getAttribute && elem.getAttribute(attr)) || null;

	if( !result ) {
		var attrs = elem.attributes,
			l = attrs.length;
		for(var i = 0; i < l; i++) {
			if(attrs[i].nodeName === attr)
				result = attrs[i].nodeValue;
                }
	}

	return result;
}

需要注意：上面的代码中还引用了element这个变量，所以你在变量中还需要开启element变量，element是自动事件变量，做如下设置：

Step 3 ：设置对照表

在GTM中点击「代码」—「新建」—「选择一个代码器类型以开始设置」——「对照表」，做如下设置：

将前面获取的ga-data的属性里面的具体数值转化成对应的具体行为，一般数值范围选用顺序构造，方便后面设置Trigger的时候确定促发条件

Step 4 ：设置Trigger

在GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「点击-所有元素」，做如下设置：

Step 5 ：设置代码

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics（分析）：GA4 事件」，做如下设置：

Step 6 ：测试发布

然后就是测试，参考：Google Tag Manager中做预览调试（用Tag Assistant）

在Debug测试无异常后即可发布。用这种方法可以简化页面代码的部署，维护方便，后面只需在需要跟踪的位置添加ga-data就可以。

Step 7 ：注册事件参数

在GA4中注册事件参数，就可以在GA4报告中使用该维度。