当前位置:主页 > 心情随笔正文

谷歌表单自动填写(盘点8款优秀的国内外表单软件)

10-28 心情随笔

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

如何用Google Tag Manager抓取表单提交数据

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

使用dataLayer监测表单数据

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

使用dataLayer抓取表单值,需要在GTM中进行以下操作:

首先要保证可以满足以下需求:

ž你必须最少在GTM中已经建立了一个表单提交触发器。

ž你必须使用标准的html编写的表单。

ž你的表单必须在网站上是运行状态。

例如类似如下的表单:

如何用Google Tag Manager抓取表单提交数据如何用Google Tag Manager抓取表单提交数据

开始收集数据!

首先打开表单提交的页面,当然你也可以使用上图中的表单来做一次测试。当表单提交时,我们想立即让页面停止跳转的过程。最简单的方法就是,同时按住Ctrl并点击提交按钮。这样就可以提交表单,并在新的标签页上打开确认页面。这时在回到之前的标签页,你就会看到这个页面上发生的所有事件。

接下来,如果想要使表单已经提交,并且表单信息已经被添加到dataLayer上,为此,就需要使用浏览器中的开发者工具中的JavaScript Console。在windows系统中可以使用快捷键F12或者Ctrl + Shift +J,在Mac中可以使用CMD+OPT+J。

在控制台中,输入dataLayer,来查看页面上的DataLayer情况。GTM会使用dataLayer来追踪页面上发生的所有活动。每一次输入在dataLayer上都是页面上发生的一次新的事件或者活动。因为我们刚提交了表单,所以dataLayer上记录的最后一个事件应该是表单提交信息。如果你没有看到表单提交的事件,请检查GTM中的设置是否正确。

如何用Google Tag Manager抓取表单提交数据

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

提取需要的信息

如果你在dataLayer上看到这些信息,那么我们就可以在GTM中抓取到这些信息!在GTM中创建新的DataLayer变量,那么现在我们就可以从提交表单信息中抓取性别数据。在这里我会将其命名为DLV contact form gender

在本文的案例中,gender的值被嵌套在gtm.element,5 field下。所以我们插入gtm.element.5.value在dataLayer变量命中。这个变量就会返回gender下的单选钮的选择情况数据。

如何用Google Tag Manager抓取表单提交数据

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

如何用Google Tag Manager抓取表单提交数据

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

使用JS追踪表单值

现在我们使用JS来实现同样的功能。首先要在GTM中创建一个自定义JS变量,用以获取表单提交的数据信息。在自定义JS变量中,我会使用一个CSS Selector来查找页面上的元素。

在你的表单中,点击你需要追踪的fields,就会看到这个元素的id、class或者其他可以让我们可以使用CSS Selector确定该元素。

版权保护: 本文由 主页 原创,转载请保留链接: http://www.pick52.cn/suibi/1354.html