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

GTM上用表单提交触发器做表单提交跟踪

Google Analytics 4 Haran 8年前 (2018-01-11) 21071次浏览 23个评论
文章目录[隐藏]

更新时间:2024年6月9号

这一篇介绍GTM上的表单提交触发器

认识表单提交触发器

GTM的触发器有个表单提交的功能,应用这个功能可以知道访客是否真正完整信息的提交,而不止是行为上的点击了一个submit的形式,这样的数据将更准确,这个场景可以适用于:用户注册,用户订阅,用户信息提交等,只要代码结构里面有form的形式,都可以使用这个去跟踪。

 

表单提交触发器内置变量

GTM里面默认已经有不少表单提交的一些内置变量,当执行表单提交触发器时,系统将会自动填充以下变量:

  • Form Element:用户点击的表单元素。
  • Form Classes:表单类属性中的一系列值。
  • Form ID:表单元素的 ID 属性。
  • Form Target:表单元素的目标属性。
  • Form URL:表单元素的 HREF 属性(如有)。
  • Form Text:表单内部的可见文本。

上述的变量都是内置变量,你只需要勾选就可以用这个,一般来说在表单提交触发器中主要是使用Form Classes和Form ID。

表单提交跟踪的条件

在使用表单提交的时候需要满足两个条件:

  1. form层级的代码必须要有个id属性或class属性,我推荐使用id属性,也就是<form id=”asdf” >这样子
  2. 需要表单信息验证,也就是用户提交信息不完全的时候,提示某些位置的信息还没有填写

上述两个是必须的,第一个是用于表单的定位于区分,如果你的一个页面有多个表单位置的话,那么两个id属性需要不同;第二个的作用是成功提交的标志。

如果是用第三方表单系统,需要第三方表单系统支持,以为Gravity Forms例:Google Analytics 4 上对Gravity Forms表单做跟踪

 

表单提交设置示例

以为https://offers.hubspot.com/contact-sales上的表单为例子,看如何用表单触发器做表单提交跟踪。

Step 1 :查看页面源码

点击鼠标右键中的“检测”,可以看到页面代码中的form部分如下,而且有id属性,后面会需要用到

GTM上用表单提交触发器做表单提交跟踪

 

 

Step 2 :开启表单内置变量

表单提交触发器包含有一些内置变量,需要将其开启。

GTM中点击「变量」—「内置变量」—「配置」,然后下来就可以看到表单有如下几个内置变量:

GTM上用表单提交触发器做表单提交跟踪

一般用的比较多的Form Classes或Form ID,所以我这里开启这两个。

Step 3 :设置表单提交触发器

从Step 1,我们已经知道了id是commentform。

GTM中点击「触发器」—「新建」—「选择一个触发器类型以开始设置」——「表单提交」,做如下设置:

GTM上用表单提交触发器做表单提交跟踪

 

  • 等待代码触发完毕 :待依赖此事件的所有代码均已触发,或指定的超时时间已过后(二者取其先),再提交表单。取消选中此选项可保证代码获得最大的触发机会,但较慢的代码可能要等到表单提交引发下个页面加载后才能触发。
  • 检查验证结果 :只有成功提交的才触发,必须勾选,勾选的时候会设置条件,一般是限制在哪个页面,如果不需要做限制,就用这个正则去匹配所有的即可GTM上用表单提交触发器做表单提交跟踪

此触发器的触发条件:就是用到属性ID的,用于限制哪个表单。

GTM上用表单提交触发器做表单提交跟踪

Step 4 :设置代码

GTM中点击「代码」—「新建」—「选择一个代码类型以开始设置」——「Google Analytics(分析):GA4 事件」,做如下设置:GTM上用表单提交触发器做表单提交跟踪

 

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

 

Step 5 :预览调试

最后就是测试。

  • 先不输入内容,直接点击提交,这时候应该不触发。
  • 然后输入内容,点击提交,提交成功,应该是触发。

GTM上用表单提交触发器做表单提交跟踪

 

 

如果你不会调试,请看:Google Tag Manager中新的调试方式:Tag Assistant

 

常见问题

开启增强跟踪后,表单跟踪没事件

表单是否是第三方表单,如果是第三方表单,增强的里表单跟踪是不支持的;如果是自己开发的表单页面,考虑页面代码结构不符合要求。

 


如有疑问,可以在文章底部留言或邮件(haran.huang@ichdata.com) 我~
喜欢 (9)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(23)个小伙伴在吐槽
  1. 你好。如果注册页是JS的形式,触发器除了表单提交,还能用什么其他的触发器来完成注册页的跟踪吗
    lucas2025-10-17 16:36 回复 Windows 10 | Chrome 141.0.0.0
    • Haran
      注册成功,让开发通过dataLayer.push发送一个自定义事件
      Haran2025-10-17 16:51 回复 Mac OS X | Chrome 141.0.0.0
  2. 你好,请教一下。 使用FormID追踪,一般是限制在哪个页面,如果不需要做限制,就用这个正则去匹配所有的即可。 请问这里具体要怎么写。我们的网站上的表单不只在一个页面。
    hazel2024-09-09 11:23 回复 Windows 10 | Chrome 128.0.0.0
    • Haran
      可以在「当所有这些条件均为 true 时,启用此触发器」做限制页面,如果要匹配所有,可以正则,设定为(.*),就匹配所有页面。
      Haran2024-09-09 11:40 回复 Mac OS X | Chrome 128.0.0.0
1 2