在提交表单时使用DTM获取输入字段值

时间:2017-09-21 20:00:07

标签: javascript adobe adobe-analytics

我有两个输入字段,其中包含用户访问卡和密码。并且用户单击“提交”按钮进行身份验证。

我在我的应用程序中使用DTM来捕获用户导航,但我也希望将这些字段的值提供给我的DTM,以便我知道用户是谁。

这就是我尝试但没有运气。

  • 创建数据元素如下:

enter image description here

并创建了基于事件的规则。但不确定如何将值显示在我的报告中:

enter image description here

感谢您的帮助。

1 个答案:

答案 0 :(得分:3)

  

示例表格

由于您没有发布表单代码的内容,因此这是一个简单的表单,基于我在您发布的屏幕截图中看到的内容,我将在下面的示例中使用。

<form id='someForm'>
  User Name <input type='text' name='userName'><br>
  Password  <input type='password' name='userPass'><br>
  <input type='submit' value='submit' />
</form>
  

数据元素

首先,让我们回顾你做错了什么。

1)你说你想捕获两个表单字段,但你只有一个数据元素......也许?在你的问题中,你并没有真正传达这一点。我只是假设你在其余的截图中做了什么。但要明确:您应该有两个单独的数据元素,每个字段一个。

2)您使用的 CSS Selector Chain 值仅为input,因此它将选择页面上的第一个输入字段,该字段可能与一个或不一致您要捕获的输入字段。因此,您需要使用对于要捕获的输入字段唯一的CSS选择器。像input[name="userName"]这样简单的东西可能就足够了(但是如果没有看到你的网站,我就无法确认)。您需要对为其他输入字段创建的第二个数据元素执行相同操作(例如input[name="userPass"]

3)在获取值下拉列表中,您选择了&#34; name&#34;。这意味着如果你有例如<input type='text' name='foo'>,它将返回&#34; foo&#34;。由于您要捕获用户输入的,您应该选择&#34; value&#34;从下拉列表。

解决方案

将上述所有内容放在一起,你应该有两个 数据元素,它们看起来像这样(一个用于用户名字段,一个用于密码字段;只有一个如下所示):

enter image description here

  

事件基本规则

首先,让我们回顾你做错了什么。

1)您在元素标记或选择器中指定的值为input。您没有提交输入字段;你正在提交一份表格。输入字段甚至没有提交事件处理程序!您的事件类型是&#34;提交&#34;,因此元素标记或选择器至少应为form。但是真的......

2)理想情况下,您应该使用CSS Selector,它更直接,唯一地定位您要触发规则的表单。例如,表单可能具有id属性,您可以在CSS Selector中定位该属性。或者表单可能位于特定页面上,因此您可以根据URL添加其他条件。 CSS Selector的组合或您用于唯一标识表单的其他条件取决于您的网站的设置方式。在上面的示例表单中,我添加了id属性,因此我可以使用form#someForm作为CSS选择器。

3)您检查了手动分配属性&amp;属性复选框,然后添加两个属性 = 项。这告诉DTM仅在输入具有值为&#34; userName&#34;的name属性时才触发规则。如果它的name属性值为&#34; userPass&#34;。那么name不能同时拥有两个值,现在就可以了!

<input name='foo' name='bar'> <!-- bad! -->

所有这些都需要删除,因为再次(来自#1),您应该定位form,而不是input字段。

4)为了更好地衡量,您似乎添加了数据&gt;类型的规则条件 自定义,但代码框为空。该规则仅在框返回真值时才会触发。由于框中没有代码,它将返回undefined(如果没有返回任何内容,则返回javascript函数返回的默认值),这是一个假值。这也需要删除。

解决方案

综合以上所有内容,基于事件的规则条件部分应如下所示:

enter image description here

但同样,理想情况下,您的条件应该更复杂,以更独特的方式定位您的表单。

引用数据元素

最后,您可以引用输入字段以使用%data_element%语法填充各个工具部分中的任何字段。例如,您可以像这样填充几个Adobe Analytics eVar(数据元素名称反映了我在上面创建的示例):

enter image description here

或者,您可以在自定义代码框中使用javascript语法引用它们,例如: _satellite.getVar('form_userName');

  

附加说明

1)我强烈建议您不要捕获/跟踪此类信息。首先,根据您帖子中的上下文线索,看起来这可能算作个人身份信息(PII),受到许多法律的保护,因国家而异。其次,一般来说,捕获这些信息并将其发送给Adobe(或其他任何地方,真的)是一个很大的安全风险。总的来说,捕获这类数据实际上是在乞求罚款,诉讼等等。

2)注意(假设满足所有条件),&#34;提交&#34; 事件类型将跟踪用户点击提交按钮的时间,这不一定与用户成功填写表单(使用有效输入填写所有表单字段等)相同。我不了解您的要求的完整背景/动机,但一般来说,大多数人的目标是仅在成功完成表单时捕获事件/数据(有时会单独跟踪表单错误)。