如何使用jQuery或JavaScript准确跟踪Google Analytics中的表单放弃

时间:2017-06-05 20:29:58

标签: javascript jquery forms google-analytics

我(可能还有人被要求解决此问题)希望通过使用jQuery(或JavaScript)准确跟踪Google Analytics中的“表单放弃”。这样,您就可以从Google Analytics生成报告,以显示用户在离开或未提交表单之前进入表单填写流程的程度。

是否有更好的方法可以跟踪以下#1的& 2(通过使用涵盖以下方案的jQuery事件触发器,但不需要涉及表单验证的复杂脚本,其他步骤的建议将是额外的功劳)?以下示例是我到目前为止所使用的:

1。)跟踪每个表单字段的单击。当事件触发时,它将通过:“表单 - 占位符文本”传递给GA。这样做的问题是,某些用户将使用Tab键在字段中循环,而不会单击或仅在字段上单击一次。例如:

$("form field").click(function(event){ fire event code here });

2.。)我尝试在每个事件中添加一个.on('keydown'),这样当用户点击OR时,当用户开始输入字段时,会将与步骤1中相同的值传递给GA。这里的问题是一些用户使用Chrome自动填充数据,这些数据不会触发keydown或click。当用户在其浏览器或插件中保存表单数据并且字段全部为其自动填充时,会发生这种情况。例如:

$("form field").keydown(function(event){ fire event code here });

3.。)对于下拉选择菜单,我使用:

$("form select").on('change',function(){ fire event code here });

这通常就足够了。

4.。)对于文本区域,我有相同的问题,可以使用Tab键。注释部分通常不会自动填充(并且它们不是必需字段,因此整体上并不那么重要)。为此我倾向于使用: (放置在同一个容器中,因此它只触发一个事件或另一个事件,但从不同时触发)。

$("form textarea").click(function(event){ fire event code here });

$("form textarea").keydown(function(event){ fire event code here });

5.。对于Radio Menus,我通常使用:

$("form input[type='radio']").click(function(event){ fire event code here });

这往往很好用,因为它们通常不会被自动填充触发。

在所有事件中,我使用3分钟超时,然后再次触发事件以防止/减少每页加载的重复触发(我还会根据Google Analytics中的唯一事件进行过滤,以确保不会显示每个用户的重复事件)。

如果可以通过简单的$(“”)。on(“something”){fire event values}覆盖所有场景,那么它可以在Tag Manager中实现或在JS脚本中使用。

对于这种情况,我们假设我们只有以下形式,我们希望跟踪与元素的所有可能的交互,以便我们知道用户放弃的位置(请不要评论提交跟踪):三个输入,一个选择下拉列表,三个收音机菜单和一个文本区域(记得请尝试并考虑自动填充和Tab键)。

<form>

<input name="Name" type="text" placeholder="Name *" title="Name *" class="form-field">

<input name="E-mail" type="text" placeholder="E-mail *" title="E-mail *" class="form-field">

<input name="Phone Number" type="text" placeholder="Phone Number *" title="Phone Number *" class="form-field">

<select title="dropDown" name="dropDown" class="form-field">
    <option value="0">Select Something</option>
    <option value="1">Select Something Else</option>
    <option value="2">Select Another Something</option>
</select>

<input type="radio" name="gender" value="male"> Male</input>
<input type="radio" name="gender" value="female"> Female</input>
<input type="radio" name="gender" value="other"> Other</input>

<textarea name="Comments" placeholder="Comments" title="Comments" class="form-field"></textarea>

</form>

任何提示或建议都会非常有用。

谢谢!

1 个答案:

答案 0 :(得分:0)

您可以跟踪focus而不是其他事件,因为必须集中使用字段,因此焦点更加可靠。