欢迎访问我的博客,有问题可以在任意文章底部留言评论

用 gtag() 实现 GA4 事件跟踪(硬编码方式)

事件 Haran 10年前 (2017-01-24) 23950次浏览 4个评论

更新时间:2025年6月18号

如果网站没有使GTM,而是直接在网页中部署gtag.js,则可以通过gtag() 方法发送事件。

这种方式也被称为硬编码事件跟踪。

注意:如果你的GA4是通过GTM部署的,则不要再使用 gtag() 进行事件跟踪,而应使用GTM配置GA4事件标签。两种方式混合使用容易造成维护困难,甚至可能导致重复发送事件。

相比GTM,硬编码方式需要开发人员在每一个需要跟踪的位置添加代码,因此灵活性较差,后续维护成本也更高。

下面通过一个完整示例介绍如何实现。

用 gtag() 实现 GA4 事件跟踪(硬编码方式)

 

Step 1:添加 gtag() 事件跟踪代码

GA4 使用 gtag('event') 方法发送事件,基本语法如下:

gtag('event', 'click', {
  event_parameter1: 'book retailer',
  event_parameter2: 'Barnes & Noble',
  event_parameter3: 5
});

其中:

  • 第一个参数表示调用事件接口(event
  • 第二个参数为事件名称
  • 第三个参数为事件参数

一个事件最多可以携带 25 个自定义事件参数(系统自动收集参数不计入该限制)

下面定义一个事件:

  • 事件名称:hard_code_event
  • 事件参数:GA4硬编码事件跟踪

完整代码如下:

gtag('event', 'hard_code_event', {
  parameter1: 'GA4硬编码事件跟踪'
});

 

将鼠标移动到需要跟踪的位置,点击鼠标右键——检查:

用 gtag() 实现 GA4 事件跟踪(硬编码方式)

假设网页中需要跟踪的链接如下:

<span style="font-size: 12pt;"><a href="links">GA4硬编码事件跟踪</a></span>

开发人员可以在 HTML 中增加 onclick 事件:

<a  href="links" onclick="gtag('event', 'hard_code_event ', { 'parameter1': 'GA4硬编码事件跟踪' });">GA4硬编码事件跟踪</a>

添加完成后,当用户点击该链接时,GA4 就会发送一个 hard_code_event 事件。

 

Step 2:预览与调试

由于网站没有安装 GTM,因此 Tag Assistant 无法用于调试硬编码事件。

可以使用Google Analytics Debugger浏览器插件,或者通过浏览器开发者工具开启 Debug Mode,然后点击「GA4硬编码事件跟踪」,然后返回到GA4里,点击「配置」——「DebugView」:

 

用 gtag() 实现 GA4 事件跟踪(硬编码方式)

如果配置正确,就可以在 DebugView 中看到hard_code_event事件,说明事件已经成功发送。

 

Step 3 :注册事件参数

发送事件后,如果希望在 GA4 报告中使用 parameter1,还需要将其注册为自定义维度。

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

用 gtag() 实现 GA4 事件跟踪(硬编码方式)

 

Step 4 :验证数据和报告查看

正式报告通常需要等待一段时间才会出现数据,一般在 24~48 小时 内可见

在GA4中点击「报告」——「生命周期」——「互动度」——「事件」,可以在事件报告中找到事件“hard_code_event”:

用 gtag() 实现 GA4 事件跟踪(硬编码方式)

 

小结

使用 gtag() 进行硬编码事件跟踪虽然实现简单,但存在明显不足:

  • 每新增一个事件,都需要开发人员修改网页源码并重新发布网站;
  • 页面中的跟踪代码越来越多,可维护性较差;
  • 不利于后期统一管理、版本控制和调试;
  • 仅适用于直接部署 gtag.js 的网站,不适用于通过 GTM 部署 GA4 的场景。

因此,除非网站无法使用标签管理系统,否则一般不建议采用硬编码方式实现事件跟踪。

 


有疑问可以在底部留言
喜欢 (8)
发表我的评论
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 请问大神gtag如何改呢
    ytkah2020-04-29 14:17 回复 Windows 10 | Chrome 81.0.4044.122
    • Haran
      参考页面硬编码的形式,直接在需要跟踪的位置添加事件跟踪代码
      GA小站2020-04-29 16:22 回复 Mac OS X | Chrome 81.0.4044.122
      • 可以举个例子吗
        ytkah2020-05-06 14:51 回复 Windows 10 | Chrome 81.0.4044.129
        • Haran
          https://www.ichdata.com/docs/ga-practice-guide/chap2/event-tracking
          GA小站2020-05-06 22:25 回复 Mac OS X | Chrome 81.0.4044.129