使用Google跟踪代码管理器跟踪Caldera表单

破火山口形式 是专为WordPress设计的拖放式响应式表单生成器。就像（几乎）其他任何形式一样，可以使用Google跟踪代码管理器（GTM）跟踪Caldera，在本博文中，’将向您展示如何做到这一点。

注意： 这篇博客文章介绍了如何使用Universal Analytics跟踪事件。如果您想熟悉Google Analytics（分析）中的事件跟踪4， 您还可以参考此博客文章.

 

上下文

在我的一个“Best-selling”博客文章，如何使用Google跟踪代码管理器跟踪表单，我’列出了一系列可供选择的技术。如果你’重新使用GTM进行表单跟踪，请点击此处’s a quick tour.

那里’大量不同形式的内容。其中一些在成功提交后刷新，有些则没有，某些可能会将您重定向到“谢谢”页面，依此类推。表单跟踪的主要问题是，对于表单如何使用没有全球标准发达。有些开发人员可能更喜欢一种技术（例如AJAX），而他们拥有这样做的完整权利。

在上述指南中， 如何使用GTM跟踪表单， 一世’列出了可以帮助您选择正确的表单跟踪方法的工作流程。在破火山口’s case, I’会节省您一些时间并给您提示， 您应该使用AJAX表单跟踪.

 

AJAX侦听器

您可能已经熟悉Google跟踪代码管理器的主要概念：您要跟踪的每次互动都需要一个代码和一个触发器。如果您想使用Google Analytics（分析）追踪表单提交，则必须在必须触发的情况下建立通用Analytics（分析）标记和触发器（规则）。

创建标签是此过程的简单部分，我们’以后再做。首先，让’我们看到了如何区分成功的破火山口表格提交。

Lunametrics已发布了 很棒的AJAX监听器 每个人都可以免费使用。它侦听网站上的所有AJAX事件，并将其推送到数据层。这是什么意思？好了，只要表单提交成功，我们就可以捕获其AJAX响应并将其转换为触发器。

这里’s AJAX侦听器的代码。复制它并粘贴到Google跟踪代码管理器中的自定义HTML代码中。

<script id="gtm-jq-ajax-listen" type="text/javascript">
 (function() {

 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {

 // Ensure jQuery is available before anything
 if (typeof jQuery !== 'undefined') {
 
 // Define our $ shortcut locally
 $ = jQuery;
 bindToAjax();

 // Check for up to 10 seconds
 } else if (n < 20) {
 
 n++;
 setTimeout(init, 500);

 }

 }

 function bindToAjax() {

 $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {

 // Create a fake a element for magically simple URL parsing
 var fullUrl = document.createElement('a');
 fullUrl.href = opts.url;

 // IE9+ strips the leading slash from a.pathname because who wants to get home on time Friday anyways
 var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
 // Manually remove the leading question mark, if there is one
 var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
 // Turn our params 和 headers into objects for easier reference
 var queryParameters = objMap(queryString, '&', '=', true);
 var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

 // Blindly push to the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings to prevent accidental inheritance of old data
 'type': opts.type || '',
 'url': fullUrl.href || '',
 'queryParameters': queryParameters,
 'pathname': pathname || '',
 'hostname': fullUrl.hostname || '',
 'protocol': fullUrl.protocol || '',
 'fragment': fullUrl.hash || '',
 'statusCode': jqXhr.status || '',
 'statusText': jqXhr.statusText || '',
 'headers': headers,
 'timestamp': evt.timeStamp || '',
 'contentType': opts.contentType || '',
 // Defer to jQuery's handling of the 响应
 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
 }
 });

 });

 }

 function objMap(data, delim, spl, decode) {

 var obj = {};

 // If one of our parameters is missing, return an empty object
 if (!data || !delim || !spl) {

 return {};

 }

 var arr = data.split(delim);
 var i;

 if (arr) {

 for (i = 0; i < arr.length; i++) {

 // If the decode flag is present, URL decode the set
 var item = decode ? decodeURIComponent(arr[i]) : arr[i];
 var pair = item.split(spl);

 var key = trim_(pair[0]);
 var value = trim_(pair[1]);

 if (key && value) {

 obj[key] = value;

 }

 }

 }

 return obj;

 }

 // Basic .trim() polyfill
 function trim_(str) {

 if (str) {

 return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');

 }

 }


 })();
 /*
 * v0.1.0
 * Created by the Google Analytics consultants at http://www.lunametrics.com
 * Written by @notdanwilkerson
 * Documentation: http://www.lunametrics.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/
 * Licensed under the Creative Commons 4.0 Attribution Public License
 */
</script>

在你之后 installed the AJAX侦听器 via Custom HTML Tag, check whether it’确认破火山口表格提交的AJAX回复：

1. 启用 预览和调试模式.
2. 用嵌入式的Caldera表单刷新网页。
3. 尝试提交表单（填写所有字段）。
4. 是否 ajaxComplete 事件出现在预览和调试控制台中？它应该是。如果没有，请尝试使用提到的其他表单跟踪技术 在这篇博客文章中.

在“预览和调试”模式下，单击提交表单后发生的最新ajaxComplete事件，然后导航到“数据层”选项卡：

对于非开发人员来说看起来很难，对吗？但这比您想象的要容易。这是成功提交表单后传递到数据层的数据，每行是一个单独的dataLayer数据点，可用作GTM中的dataLayer变量。您应该寻找有助于确定成功提交表单的内容。向下滚动并查找“响应”。

让’s take a closer look at it. Can you see the message 谢谢您联络我们？答对了！我们可以将其用作触发器中的变量。附言请记住，您的案文可能有所不同。

创建一个变量并触发

默认情况下，Google跟踪代码管理器无法识别数据层中的数据，这意味着您必须先创建变量，然后才能将其用作变量。让’s do that.

1. 转到变量
2. 向下滚动到 用户自定义  variable 和 hit 新
3. 请点击 可变配置 并选择变量类型– 数据层变量
4. 输入数据层变量名称– attribute.response.html ，保留所有其他设置不变。
5. 对于此GTM变量的标题，我的建议是 dlv – 属性.response.html （“ dlv”代表 数据层变量）。

您可能想知道我为什么要参加 属性.response.html 作为数据层变量名称。让我们仔细看看“预览”和“调试”模式下的数据层。在第2行中，您可以看到事件名称， ajaxComplete， 与预览和调试控制台左侧显示的名称相同。然后，在第3行中，我们看到 属性 这是一个具有各种数据点的对象（响应 is one of them).

如果我们更深一层，我们’ll see that 响应 还包含另一个具有更多属性的对象，例如 数据，html，类型， 等等

因此，当我们想告诉Google跟踪代码管理器我们有兴趣 html 属性’s 值，我们需要告诉该数据的确切路径。在我们的情况下 属性 → 响应→HTML。路径的每个级别必须用点分隔→ 属性.response.html。另一个例子：假设您对服务器数据感兴趣（来自非常精确的AJAX响应）。在这种情况下，数据层变量的名称应为 属性.headers.server .

创建完之后 属性.response.html Google跟踪代码管理器中的数据层变量，让我们进行调试。刷新预览和调试模式并刷新嵌入Caldera Form的页面。填写并提交。在``预览和调试''控制台中单击最新的ajaxComplete事件，然后导航到``变量''选项卡并找到新变量 dlv – 属性.response.html。如果您正确执行了所有操作，则应如下所示：

忽略该值的样式，您的情况可能看起来有所不同。自从 html 属性包含实际的HTML代码，在“预览”和“调试”模式下可能看起来有些愚蠢。但这对我们来说不是问题，我们只想跟踪表单，对吗？

让’s返回到 属性.response.html变量。它包含一个 成功讯息 提交的表格。如果该变量的值为 未定义 那么您应该开始寻找错误。最常见的错误是变量名称中的错别字或变量路径定义不正确。有些人只是尝试使用 响应 代替 属性。响应 如果你’仍然遇到问题，请阅读指南 如何访问数据层中的数据.

现在，我们创建一个触发器，该触发器在事件发生时触发 ajaxComplete 并且我们新的dataLayer变量包含文本 消息已成功发送.

1. 转到触发器，然后单击 新
2. 选择触发器类型–自定义事件。如果您是新手，则自定义事件=数据层事件。 Lunametrics的AJAX侦听器会创建一个数据层事件（通过dataLayer.push方法），每次发出AJAX请求时。
3. 输入事件名称– ajaxComplete
4. 此触发器应触发 一些自定义事件。
5. 定义触发器触发的条件– dlv – 属性.response.html 包含 谢谢您联络我们.

 

其他变量（可选）

我真正喜欢Caldera表单的地方是，它们通过AJAX响应返回了有关表单的更多数据。让’s返回GTM预览和调试模式，并再次检查AJAX响应数据。

看到有用的东西了吗？关于什么 form_id 和 表格名称？为什么不’我们也将它们传递给Google Analytics（分析）吗？此数据有用的另一个原因是一页上有多种形式。

如果一页上有两个或多个破火山口表格，则可能要区分它们。我们该怎么做？当然，通过创建更多的数据层变量！

Okay, the hardest part is complete. 让’移至最后一步。

 

Track Caldera 形成submissions with Google Analytics

让’s做一个快速检查点。到目前为止，我们’ve触发了一个触发器 only when Caldera 形成is successfully submitted。还有，我们’设置了几个变量，这些变量将从成功提交的表单的响应中提取数据。这些变量在Universal Analytics代码中很有用。

1. 前往标签
2. 按 新 纽扣
3. 在  标签配置 选择Universal Analytics：
   1. 轨道类型– 事件
   2. 活动类别– 表格提交 （随时选择其他合适的标题）
   3. 事件动作– {{页面网址}}。
   4. 活动标签– 形成– {{dlv –attribute.response.form_id}}：{{dlv–attribute.response.form_name}} （那’是一个长值，对吗？忍受我
   5. 分配 Google Analytics（分析）设置变量 （包含跟踪ID，例如UA-XXXXXX-XX）。
   6. 保留其他字段不变。
4. 将触发器分配给您’在本博客文章的上一章中创建。

那么成功提交表单后会怎样？ Google跟踪代码管理器将调度一个包含以下数据的Google Analytics（分析）事件（变量将被实际的表单数据动态替换）：

• 活动类别： 形成Submission
• 事件动作： / pages / contact-us /
• 活动标签： 表格CF580fcfe0035ec：一般联系

 

唐’t forget to test

1. 在你之后’已完成本指南中描述的所有步骤，打开（或刷新）预览和调试模式，并使用要跟踪的Caldera表单刷新网页。
2. 填写并提交。成功提交后，应发送Google Analytics（分析）标记（它将显示在 预览和调试模式）。
3. 另外，检查 Google Analytics（分析）实时事件报告.

 

如何使用Google跟踪代码管理器跟踪Caldera表单

另一个表单跟踪指南已结束。在这篇博客中，我’ve解释了如何使用Google跟踪代码管理器跟踪Caldera表单。 AJAX作为一种技术在表单开发人员中非常受欢迎，Caldera Forms也不例外。

这里’s为了跟踪破火山口表格的AJAX响应，您需要遵循的过程摘要：

• 在Google跟踪代码管理器中安装AJAX侦听器（通过自定义HTML跟踪代码）。
• 通过检查响应数据，找到一种识别成功提交表单的方法。
• 创建数据层变量和自定义触发器。
• 创建通用Analytics（分析）标记，为其分配自定义触发器。如有必要，请插入先前创建的数据层变量。
• 测试测试测试。
• 坐下来放松一会儿。

我是否想念如何使用Google跟踪代码管理器跟踪Caldera表单？在评论中让我知道！