谷歌表单自动填写（盘点8款优秀的国内外表单软 _表单

通常情况下我们会想通过用户在我们的网站上提交的表单，来收集用户提交的关键信息。表单提交后可能信息就进入了另外一套系统，很难行程完整的数据链条。

文章插图
今天我们就来解决这个问题！通过选择性的抓取一些数据并将其存储在Google Analytics中，你就可以更好的分析你的网站流量、创建细分甚至定义再营销受众列表。用Google Tag Manager抓取表单提交信息实际上非常简单，在本文中，将会使用两种方法来监测此部分数据——使用dataLayer或者JS代码。

使用dataLayer监测表单数据

使用google tag manager可以对网站上的所有活动进行监测。从本质上讲，所有这些活动情况都可以添加为不同的dataLayer对象，你就可以了解到访客来到网站上做出的全部互动行为。这种方法在监测表单提交时也同样适用。当访客提交了一个表单，这个表单的提交事件就会被作为表单字段提交到dataLayer 。GTM就会根据设置的表单提交触发器触发的代码收取数据。
使用dataLayer抓取表单值，需要在GTM中进行以下操作：
首先要保证可以满足以下需求：

?你必须最少在GTM中已经建立了一个表单提交触发器。
?你必须使用标准的html编写的表单。
?你的表单必须在网站上是运行状态。

例如类似如下的表单：

文章插图

文章插图
开始收集数据！
首先打开表单提交的页面，当然你也可以使用上图中的表单来做一次测试。当表单提交时，我们想立即让页面停止跳转的过程。最简单的方法就是，同时按住Ctrl并点击提交按钮。这样就可以提交表单，并在新的标签页上打开确认页面。这时在回到之前的标签页，你就会看到这个页面上发生的所有事件。
接下来，如果想要使表单已经提交，并且表单信息已经被添加到dataLayer上，为此，就需要使用浏览器中的开发者工具中的JavaScript Console 。在windows系统中可以使用快捷键F12或者Ctrl + Shift +J，在Mac中可以使用CMD+OPT+J 。
【谷歌表单自动填写（盘点8款优秀的国内外表单软】在控制台中，输入dataLayer，来查看页面上的DataLayer情况。GTM会使用dataLayer来追踪页面上发生的所有活动。每一次输入在dataLayer上都是页面上发生的一次新的“事件”或者“活动” 。因为我们刚提交了表单，所以dataLayer上记录的最后一个事件应该是表单提交信息。如果你没有看到表单提交的事件，请检查GTM中的设置是否正确。

文章插图
如上图所示，通过dataLayer中不同的属性，就可以确定出需要进行检测的数据项。例如就可以抓取性别和国家相关数据。

提取需要的信息

如果你在dataLayer上看到这些信息，那么我们就可以在GTM中抓取到这些信息！在GTM中创建新的DataLayer变量，那么现在我们就可以从提交表单信息中抓取性别数据。在这里我会将其命名为DLV contact form gender
在本文的案例中，“gender”的值被嵌套在gtm.element，5 field下。所以我们插入gtm.element.5.value在dataLayer变量命中。这个变量就会返回“gender”下的单选钮的选择情况数据。

文章插图
同样，如果需要抓取“country”，就创建一个新的DataLayer变量，叫做DLV contact form country，将其变量名设置为gtm.element.9.value 。这个变量就会返回从下拉菜单中选择的“country”的情况。

文章插图
最后就是预览检查代码是否正常触发之后就可以将代码正式发布。现在你就已经成功的创建了dataLayer变量，你可以在任何需要使用该变量的情况下对该变量进行调取。例如你可以使用{{DLV contact form country}}作为一个自定义维度，将其作为一个事件标签，或者可以将其用作触发器在GTM中触发其他适合的追踪代码。

使用JS追踪表单值

现在我们使用JS来实现同样的功能。首先要在GTM中创建一个自定义JS变量，用以获取表单提交的数据信息。在自定义JS变量中，我会使用一个CSS Selector来查找页面上的元素。
在你的表单中，点击你需要追踪的fields，就会看到这个元素的id、class或者其他可以让我们可以使用CSS Selector确定该元素。