使用 jQuery 实现 GA4 事件跟踪

更新时间：2024年12月3号

除了使用GTM自带的点击触发器外，还可以通过jQuery + dataLayer.push的方式实现事件跟踪。这种方式尤其适用于需要统一管理大量点击事件，或者GTM内置点击变量无法满足需求的场景。

注意： 此方法依赖网站已加载jQuery。如果网站未使用jQuery，可使用原生JavaScript实现相同功能。

实现原理

整个流程如下：

用户点击元素——>jQuery监听指定class的点击事件——>执行dataLayer.push()——>GTM自定义事件触发——>GA4 Event Tag发送事件

首先，为需要跟踪的元素绑定一个唯一的 class，然后使用 jQuery 监听该 class 的点击事件。当用户点击该元素时，通过 dataLayer.push() 向数据层推送一个自定义事件。

GTM 再通过自定义事件触发器 接收该事件，并触发对应的 GA4 事件标签完成数据发送。

这种方式最大的优点是：

• 所有点击事件都可以采用统一的 dataLayer.push() 数据结构；
• 后续新增事件时，仅需为新的元素绑定监听即可，无需重复配置复杂的 GTM 点击触发器；
• 便于多人协作维护，也方便开发统一管理事件。

演示案例

假设需要跟踪页面中某个图标的点击行为。

Step 1 ：查看页面元素

将鼠标移动到需要跟踪的位置，右键选择检查，查看对应的 HTML 元素。：

例如可以看到该元素包含class g-mono，后续将使用 g-mono 作为 jQuery 的监听对象。

Step 2 ：设置自定义THML

在GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「自定义HTML」，命名为“HTML-Listen Icon Click”，做如下设置：

将代码中的 g-mono 替换成实际需要监听的 class 名称即可。

Step 3 ：创建自定义事件触发器

在GTM中点击「触发器」—「触发器」—「选择一个触发器类型以开始设置」——「自定义事件」，命名为“home_icon”，做如下设置：

这里的事件名称必须与dataLayer.push里的event的值保持一致，否则 GTM 无法接收到事件。。

Step 4 ：设置代码

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

注意：如需要区分，请自行设置事件参数。

Step 5 ：预览调试

完成配置后，点击预览进入GTM调试模式，页面打开看到文章，然后返回到Tag Assistant，可以看到准确触发：

方法优缺点