使用页面属性定位实现GA4事件跟踪

更新时间：2024年6月10号

在使用GTM进行GA4事件跟踪时，最常见的问题就是：

如何准确识别用户点击的页面元素，并将点击行为发送到GA4？

GTM提供了多种点击事件跟踪方式，例如：

• GTM内置点击触发器
• 元素可见性触发器
• 自定义JavaScript监听
• 数据层（dataLayer）推送

其中，通过页面属性定位（Attribute Targeting）是我最推荐的方法之一。

原因是：

• 不需要修改网站代码
• 实现成本低
• 定位准确
• 维护简单

什么是页面属性定位？

页面属性定位，就是利用HTML元素本身的属性来识别目标元素。

常见可使用的属性包括

例如：

<a href="https://www.ichdata.com/about-me.html">
关于作者
</a>

其中：

• href 可以作为定位条件
• text 内容“关于作者”也可以作为定位条件

为什么需要选择唯一属性？

页面定位最重要的原则：

定位条件必须唯一。

例如，下面这个class：

class="button"

如果页面有10个按钮：

<button class="button">购买</button>
<button class="button">注册</button>
<button class="button">咨询</button>

Click Classes equals button

这种情况下，需要增加更多条件：

例如：

Click Classes equals button

AND

Click Text equals 注册

Click URL equals /register.html

需求分析与事件设计

假设现在需要跟踪用户点击“关于作者”，跟踪的位置如下所示：

先做检查判断是否可以用属性定位法去做，将鼠标移动到需要跟踪的位置，也就是“关于作者”的上面，然后点击鼠标右键「查看页面元素」，页面元素如下：

可以发布：

• herf为https://www.ichdata.com/about-me.html
• text 为关于作者

因此可以使用页面属性定位。

将事件定义为如下：

• 事件名称：定位为“点击关于作者”
• 事件参数1：page_url，记录用户点击事件发生在哪个页面。
• 事件参数2：value，数值为1，就点击次数

GTM配置事件跟踪

Step 1：创建点击触发器

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置… 」，触发器类型选择“所有元素”，命名为“关于作者”，然后做如下设置：

Click Text对应的就是text 关于作者，Click URL对应的就是href是https://www.ichdata.com/about-me.html。

然后保存。

Step 2：创建GA4事件

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置… 」，代码类型选择“GA4-Event Tracking-关于作者”，命名为“GA4-Event Tracking-关于作者”，然后做如下设置：

事件就设置好了。

Step 3：预览调试

配置好后，还需要在 GTM 里预览调试，在GTM 里点击「预览」，打开页面后，模拟所需测试的行为，再返回到Tag Assistant，看是否有发送事件，代码是否有触发：

可以看到GA4事件出发成功。

Step 4：发布GTM

在GTM中点击右上角的「提交」，将配置发布出去。

Step 5：注册GA4事件参数

GA4不会自动显示自定义事件参数，需要GA4里的自定义设置里注册：

• page_url是文本型，注册为自定义事件级别自定义维度
• value是数值型，注册为自定义事件级别自定义指标。

注册自定义维度page_url

在GA4中点击「管理」——「自定义设置」——「创建自定义维度」，然后做如下设置：

注册自定义指标value

在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义指标」，然后做如下设置：

这样就设置完成了。

Step 6：查看GA4数据

由于GA4的数据延时，数据需要24小时候才会出现在报告中。

在GA4中点击「报告」——「生命周期」——「互动度」——「事件」，可以在事件报告中找到事件“点击关于作者”：

常见问题

点击了但是事件没有触发

预览的时候，在 Tag Assisant 里查看触发条件，没有触发的会打叉。

一个页面多个相同按钮怎么办？

增加其他页面属性，形成唯一的组合。

为什么推荐属性定位？

相比修改网站代码：

优势：部署快、不依赖开发资源、适合营销团队

但是，大型网站更推荐dataLayer