如何在表单提交上设置Google Analytics上的事件跟踪？

Question

我试图跟踪用户何时点击联系表单上的提交按钮。
页面的网址不变，它的静态。
我无法在提交后跟踪不同的URL，唯一的选择是跟踪用户何时点击提交按钮。

我需要编辑我的分析帐户吗？
我在哪里添加额外的JavaScript？
UA正确安装（analytics.js）
我是GA和JavaScript的新手，请将它分解给我。

感谢

Answer 1

I can't track a differnt URL after submission, the only option would be to track when a user hits the submit button. 

这是一个有点瞎猜的。即使Url没有改变，也可能有一些东西发生 - 在你发送它之前，可能有一些表单验证，并且在场景后面有一些动作发送，例如ajax调用。

你可以把事件追踪到提交处理程序：

<form onSubmit="ga('send','event','category','action','label')"> 
<input type="text" id="text" name="text"> 
<input type="submit"> 
</form> 

然而，这只会告诉你，有人点击提交按钮，而不是他们是否在表格填写正确，或者如果形式实际上已经发送。

现在我进入投机地，因为我不知道你的表单实际上是如何工作的 - 也许你可以给我们看一个网址或提供更多信息。

但是，也许你有一个验证函数在窗体的提交操作上调用，以查看窗体是否被正确填充。在这种情况下，这将是最好做在验证功能（可怕的简化的例子，不是生产代码）跟踪：

<form onSubmit="validate()"><input type="text" id="text" name="text"><input type="submit"></form> 

<script> 
function validate() { 
var test = document.querySelector('#text').value 
if(test = "") { 
    ga('send','event','Form','Submit','Submitted, but not filled in'); 
    return false; 
} 
ga('send','event','Form','Submit','Submitted with correct values'); 
return true; 
} 
</script> 

这是一点点好，至少它跟踪正确的意见和无效意见之间的差异。

甚至更​​多的猜测：如果你的表单发送时没有页面重新加载，它可能使用ajax调用，并且有很大的可能性是使用jQuery（我这样说，因为a）它很可能和b）更容易在jQuery中构建一个例子。如果你不使用jQuery，这个例子会产生一个错误）。

jQuery有一个叫做“全局ajax处理程序”的东西。 “全局”意味着它们不是针对特定动作的回调，只要对ajax函数进行调用，它们就会挂钩到jQuerys ajax“机制”中。如果每个页面只有一个aja事件（或者您需要逻辑来区分不同的ajax事件，例如通过检查它们发送到的url），并且允许您跟踪ajax调用是否已成功返回，就像当你的表单数据已被发送到服务器，并请求返回2xx状态代码：

$(document).ajaxSuccess(function() { 
ga('send','event','Form','Submit','Yeah, form data sent to the server'); 
}); 

然而，这并不告诉你，如果该数据已被正确处理。为此你需要让服务器发出一个成功的消息，并检查响应：

$(document).ajaxSuccess(function(event, xhr, settings) { 
    if (settings.url == "formprocessor.php") { 

     if(xhr.responseText.indexOf("success") > -1) { 
     ga('send','event','Form','Response Received','Form data processed '); 
     } else { 
     ga('send','event','Form','Response Received','Form data NOT processed '); 
     } 
    } 
}); 

全局AJAX事件处理程序附加到文件 - 你可以把你的页面上的任何地方，它不会做任何事情，除非ajax事件被调用。

再次，这不是生产代码。不要尝试复制和粘贴。

如果你是新手，这当然有点多，但它至少应该帮助你改善问题，并且看看有什么样的可能。如果你可以分享一个网址到你的表格，我可以改善答案。