Google Analytics 4 上做表单提交跟踪

Google Analytics 4 黄业忠 5年前 (2018-01-11) 9837次浏览 19个评论

这一节介绍如何在Google Analytics 4 上做表单跟踪,有两种方法:

  • 一种是通过增强衡量事件里的表单互动
  • 一种是通过表单提交触发器

增强型衡量事件里的表单互动次数

增强衡量事件里内置支持表单互动追踪,有两个事件:

  • form_start:用户在会话中首次与表单互动、事件参数有form_id、form_name、form_destination
  • form_submit:用户提交表单时、事件参数有form_id、form_name、form_destination

只需要在增强衡量事件里勾选表单互动次数就可以做跟踪。

需要注意:事件参数需要注册才可以在GA4中使用。

GTM中表单提交触发器

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

表单提交跟踪的条件

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

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

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

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

表单提交触发器

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

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

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

表单提交设置示例

以为https://offers.hubspot.com/contact-sales上的表单为例子点击鼠标右键中的“检测”,可以看到页面代码中的form部分如下,而且有id属性,后面会需要用到

Google Analytics 4 上做表单提交跟踪

 

接下来看如何在GTM上设置

开启表单内置变量

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

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

Google Analytics 4 上做表单提交跟踪

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

设置表单提交触发器

从前面我们已经知道了Id是commentform。

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

Google Analytics 4 上做表单提交跟踪

 

等待代码触发完毕 :待依赖此事件的所有代码均已触发,或指定的超时时间已过后(二者取其先),再提交表单。取消选中此选项可保证代码获得最大的触发机会,但较慢的代码可能要等到表单提交引发下个页面加载后才能触发。

检查验证结果 :只有成功提交的才触发,必须勾选,勾选的时候会设置条件,一般是限制在哪个页面,如果不需要做限制,就用这个正则去匹配所有的即可Google Analytics 4 上做表单提交跟踪

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

Google Analytics 4 上做表单提交跟踪

设置代码

最后就是设置代码。

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

 

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

 

预览调试

最后就是测试。

先不输入内容,直接点击提交,这时候应该不触发。

然后输入内容,点击提交,提交成功,应该是触发。

Google Analytics 4 上做表单提交跟踪

 

 

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

 


GA小站, 版权所有丨如未注明 , 均为原创

转载请注明标题:Google Analytics 4 上做表单提交跟踪
链接:https://www.ichdata.com/how-to-submit-a-form-in-gtm.html

喜欢 (8)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(19)个小伙伴在吐槽
  1. 博客内容不错,中文介绍这2个的好像就这一家。tagmanager是一个很不错的免费工具,但是一直不知道怎么利用tag manager跟踪网站外接表单(插件形式安装在网站的第三方表单)的提交动作,望赐教。
    hello2018-09-11 09:29 回复 Windows 10 | Chrome 65.0.3325.181
    • 按教程应该可以的
      GA小站2018-09-11 09:53 回复 Windows 7 | Chrome 68.0.3440.106
  2. 群主你好,非常感谢分享经验!我有个问题一直没弄清楚,如果在GTM里设置了各种目标跟踪,比如表格提交,点赞等等,那还需要在GA中设置同样的目标吗?如果不在GA中设置目标,只在GTM中设置跟踪,可以达到一样的效果吗?非常感谢!
    Dan2018-06-30 23:48 回复 Mac OS X | Chrome 67.0.3396.87
    • 设置目标是便于归因
      GA小站2018-07-01 13:42 回复 Mac OS X | Chrome 67.0.3396.99
      • 感谢回复! :smile:
        Dan2018-07-02 17:35 回复 Mac OS X | Safari浏览器 603.3.8
      • GTM设置完表单追踪后,要在GA中设置相同的目标,这样GA-转化-目标中才能看到这个转化数据,是吗
        柚子2019-01-17 18:09 回复 Windows 7 | Chrome 70.0.3538.110
        • 是的,也可以在渠道报告看
          GA小站2019-01-17 18:17 回复 Mac OS X | Chrome 71.0.3578.98
          • 博主在请教个问题: 这里的表单提交是指只要点击一次submit按钮就记为一次转化吗 假设必填项没填完或某个字段填写格式不正确就去点击submit按钮,也记为一次转化吗
            柚子2019-01-25 09:52 Windows 7 | Chrome 70.0.3538.110
          • 成功提交才算一次
            GA小站2019-01-28 10:11 Mac OS X | Chrome 71.0.3578.98
  3. 表单如果是在弹窗里,GTM检测不到,怎么办啊?
    Alex Yao2018-06-13 15:48 回复 Mac OS X | Chrome 66.0.3359.181
    • 要看你弹框实现的形式,一般是可以的
      GA小站2018-06-13 20:18 回复 Windows 7 | Chrome 63.0.3239.132
  4. 表单提交validation的确是一个bug,上周五刚测试过.....
    Yunhui2018-02-19 16:47 回复 Mac OS X | Chrome 64.0.3282.167
    • 终于有个人发现一样的结果,哈哈,实践出真知
      GA小站2018-02-22 16:14 回复 Windows 10 | Chrome 63.0.3239.132
  5. 谢谢您的分享,我想问一下添加代码时里面的字段类别、操作、标签是根据什么来设置的啊?这个我没太明白,麻烦帮忙解答一下,谢谢了。
    fish2018-01-16 10:55 回复 Windows 7 | Chrome 60.0.3112.78
    • 都是自定义的,自己定个名称即可,类别是必填,其他可以选填
      GA小站2018-01-16 11:04 回复 Windows 10 | Chrome 63.0.3239.132
      • 那代码是通过哪个字段触发喽?也就是通过什么字段(类别、操作、标签)与触发器关联起来?
        fish2018-01-16 11:30 回复 Windows 7 | Chrome 60.0.3112.78
        • 两者并无关联的,表单中的触发器是内置的
          GA小站2018-01-16 11:46 回复 Windows 10 | Chrome 63.0.3239.132
          • 请问一下跟踪邮箱链接跟踪是怎么设置的啊?真是太感谢了。
            fish2018-01-16 11:51 Windows 7 | Chrome 60.0.3112.78
          • UTM参数跟踪
            GA小站2018-01-16 13:43 Windows 10 | Chrome 63.0.3239.132