google conversion AJAX form with GTM

Question

我正在尝试跟踪AJAX表单上的转换，我正在使用谷歌标签管理器来控制任何转换和其他谷歌标签，

在AJAX表单处理结束时，我不会将客户端发送到“谢谢”页面，事实上，用户会收到一条“谢谢”消息。

如何在完成ajax表单后实现转换代码(使用GTM - google标签管理器)，我尝试了一条规则，GTM将在url上使用css selecteor #谢谢触发，以及在我成功时执行的ajax函数：

window.location.href = window.location.href + "#thanks";

但这并不管用。

Answer 1

jQuery (和Prototype，可能还有许多其他框架)具有全局Ajax事件处理程序的概念，这些事件处理程序可以挂接到Ajax事件，而无需更改执行请求的函数。

例如，如果你想检查你的表单是否已经发送，你可以使用ajax成功处理程序。它会告诉您请求是否成功，即服务器是否返回200http状态。它不会告诉您您的服务器是否确实发送了数据，这是您需要在服务器响应中包含的内容。

您可以将如下函数用作自定义HTML标记：

<script>
(function() {
 try {
     $( document ).ajaxSuccess(function( event, xhr, settings ) {
     if ( xhr.responseText.indexOf("thank") > -1 ) {
         dataLayer.push({'event':'formSucess'});
     }
   });
} catch(e){
// silently fail if anything goes wrong
}
})(); 
</script>

(我喜欢将javascript标记包装在自执行函数中，并使用try/catch块，这两者都是为了不干扰页面上已有的其他脚本。但这对于ajax事件处理不是必需的，您也不需要这样做)。

ajax成功处理程序有三个参数(您不需要提供参数值，jQuery自己填充值)：ajax事件(在这种情况下总是“成功”)，xhr请求和请求的配置设置(即settings.url将是您发送数据的url )。

如果我们假设您的服务器在成功提交数据后输出文本字符串“感谢您的电子邮件”，您可以像上面的示例一样，检查xhr对象的responseText属性，看看它是否包含“谢谢”。然后将一个自定义事件推送到dataLayer，并基于该事件触发任何标记。