在 Google Tag Manager 中跟踪 Ajax 表单答案

【问题标题】：Tracking Ajax Form in Google Tag Manager在 Google Tag Manager 中跟踪 Ajax 表单
【发布时间】：2015-10-16 01:16:32
【问题描述】：

我在 Marketo 中构建了一个简单的表单登录页面。该表单使用 Ajax。传统的表单触发器不起作用，历史更改也不起作用。应该如此简单的事情变得过于复杂。

提交按钮上的点击正在跟踪，但由于表单需要验证，因此不准确。

关于在成功提交表单时触发标签以便我可以在 Google Analytics（分析）中跟踪表单线索的任何想法？

非常感谢！

【问题讨论】：

您使用的是表单 2.0 吗？
研究使用 jquery ajaxComplete 函数。

标签： ajax forms google-analytics google-tag-manager marketo

【解决方案1】：

检查：

表单提交触发有效的提交浏览器事件。
此事件必须传播到 document 节点。

根据这一点，您需要在 Google 跟踪代码管理器中使用 JavaScript 代码和您的自定义事件侦听器创建自定义 HTML 标记。实现取决于没有表单提交事件 (1) 或事件未传播 (2)。

阅读 Simo Agava 关于该主题的精彩博文：

http://www.simoahava.com/analytics/track-form-engagement-with-google-tag-manager/

【讨论】：

非常感谢您的回复。根据我对文章的理解，需要对表单页面进行更改。我们无权访问，也不能指望那里有任何更新。他们还有其他可能有效的方法吗？
@SMG，您可以在 Google 跟踪代码管理器中使用自定义 HTML 标记来包含您的自定义 JavaScript 代码。

【解决方案2】：

假设您使用的是 Forms 2.0，则使用此处提供的文档：

http://developers.marketo.com/documentation/websites/forms-2-0/

以下设置对我有用。在跟踪代码管理器中创建一个这样的自定义 HTML 标记：

<script>
MktoForms2.whenReady(function (form) {
    form.onSubmit(function(){
        dataLayer.push({
            'event': 'hello',
            'message': 'world'
        });
    });
});
</script>

创建一个对您的情况有意义的触发器。我们在 Marketo 着陆页上使用这些表单，因此我将标记设置为在 URL 与我们用于着陆页的模式匹配时触发。

在提交表单时，您应该看到它被推送到dataLayer（我不得不疯狂地敲击键盘上的esc 键以防止页面刷新，所以我可以确保它被推送到dataLayer） .

文档显示您也可以将onSuccess 用作事件。

此设置的灵感来自此处的幻灯片 #46：http://www.slideshare.net/stijnheijthuijsen/marketo-user-group-nl-20150209-hands-on-google-analytics

【讨论】：

谢谢。是否有更简单的实现跟踪方法，例如在历史更改时？
由于 Marketo 表单的构建方式，不会有任何更简单的方法。