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

Question

我（可能还有任何曾被要求处理此任务的人）希望通过使用 jQuery（或 JavaScript）在 Google Analytics（分析）中准确跟踪“表单放弃”。这允许从 Google Analytics 生成报告，显示用户在离开或未提交表单之前进入表单填写过程的程度。

是否有更好的方法来跟踪以下 # 的 1 和 2 的表单放弃（其他步骤的建议将是额外的功劳）通过使用涵盖以下场景但不需要的 jQuery 事件触发器涉及表单验证的复杂脚本？以下示例是我迄今为止使用的：

1.) 跟踪每个表单域的点击。当事件触发时，它会将“表单 - 占位符文本”传递给 GA。这样做的问题是，一些用户将使用 Tab 键在字段中循环，并且从不单击或仅在字段上单击一次。示例：

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

2.) 我尝试为每个事件添加一个 .on('keydown') ，以便当用户单击或当用户开始输入字段时，将与步骤 1 中相同的值传递给GA。这里的问题是一些用户使用 Chrome 自动填充数据，不会触发按键或点击。当用户在浏览器或插件中保存表单数据并且所有字段都为他们自动填充时，就会发生这种情况。示例：

$("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.) 对于我通常使用的单选菜单：

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

这往往效果很好，因为它们通常不会由自动填充触发。

在所有事件中，我都会在事件再次触发之前使用 3 分钟超时，以防止/减少每次页面加载的重复触发（我还在 Google Analytics（分析）中按唯一事件进行过滤，以确保不显示每个用户的重复事件）。

如果所有场景都可以通过一个简单的 $("").on("something"){ fire event values } 覆盖，这样它就可以在跟踪代码管理器中实现或在 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>

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

谢谢！

Answer 1

您可以跟踪focus 而不是其他事件，焦点更可靠一些，因为字段必须集中才能使用。