Google跟踪代码管理器AJAX表单跟踪

更新时间：2020年6月5日。 In this post, I’ll向您展示如何实现Google跟踪代码管理器AJAX表单跟踪。本文是更大更全面的指南的一部分– Google跟踪代码管理器表单跟踪.

您可能已经熟悉了主要的GTM概念：您要跟踪的每个交互都需要一个标签和一个触发器。另一方面，如果您’对Google跟踪代码管理器非常陌生，首先为初学者阅读本教程.

如果您想使用Google Analytics（分析）追踪所有表单提交’当必须触发代码时，需要创建Google Analytics（分析）代码和触发器（规则）。

创建标签是此过程的简单部分。让’s make one – 您’在本博客文章的下一章中将需要它）：

前往标签
按新的纽扣
在一个 标签配置 选择Universal Analytics：
1. 选择轨道类型–Â 事件
2. 活动类别–Â 表单提交 （随时选择其他合适的标题）
3. 事件动作–Â 联系表格 （随时选择其他合适的标题）
4. 活动标签–Â {{页面网址}}。P.S.随时为事件类别，操作和标签选择其他值。
5. 选择一个 Google Analytics（分析）设置变量.
将触发部分留空（暂时），然后单击Â 保存。我们’待会儿再讲。

让’■创建一个监听器和触发器

AJAX表单的挑战在于，成功提交表单后，内置 GTM表单提交触发器没有抓住。此外，访问者不会重定向到“Thank you” page (therefore, 此跟踪方法也将不起作用）。

提交表单时，它可能会刷新并显示“您已成功填写表格”消息，而没有实际的页面刷新或URL更改，对不对？如果是，那么（很可能）此博客文章正是您所需要的。

那里’形成你的大机会’处理是使用AJAX技术。我建议在此跳过所有技术性的巨型（因为我不是开发人员+我不’认为我有能力清楚地解释其工作原理）。您唯一应该知道的是 AJAX 听众。

慷慨的分享了很棒的GTM AJAX监听器所有人都可以免费使用。如果您想了解更多有关其工作原理的信息，可以在Bounteous博客上进行。在这里，我们’我会借用他们的代码来跟踪表单提交。复制下面的代码并将其粘贴到GTM的自定义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 and 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
 '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>

将该自定义HTML标记设置为在所有页面上触发。现在，让’检查表单是否基于AJAX构建：

启用（或刷新）预览和调试模式.
用表单刷新网页。
尝试提交表单（没有错误）。
是否 ajaxComplete 事件出现在预览和调试控制台中？
1. 如果是，则表单正在使用AJAX。
2. 如果没有，请尝试使用提到的其他Google跟踪代码管理器表单跟踪方法在这篇博客文章中.

让’看到我们可以用该AJAX表单做什么。请点击 ajaxComplete 预览和调试模式下的事件，然后单击数据层：

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

让’我们仔细看一下。你能看到一条消息吗“此消息已成功发送”？答对了！我们可以将其用作触发器。 笔记： 在您的情况下，响应可能会有所不同。

首先，让’在Google跟踪代码管理器中创建dataLayer变量.

转到变量
向下滚动到 用户定义 variable and hitÂ 新的
点击 可变配置Â 然后选择变量类型–Â 数据层变量
输入数据层变量名称–属性响应。保留所有其他设置。
对于此GTM变量的标题，我的建议是 dlv– attributes.response (“dlv” stands forÂ 数据层变量）。

你’我大概猜到我为什么进入 属性响应作为数据层变量名称，而不只是响应。让’仔细查看“预览”和“调试”模式下的“数据层”。在第2行，您会看到事件名称 ajaxCompleteÂ – that’与预览和调试控制台中显示的名称相同’s的左侧。然后我们看到 属性，是包含各种数据点（键值对）的对象。还有响应Â是这些键之一。

因此，当我们想告诉Google跟踪代码管理器我们对 响应’sÂ 值，我们需要告诉该数据的确切路径。就我们而言’s 属性-回应。路径的每个级别必须用点分隔。 attribute.response 。另一个例子：’s say you’对服务器数据感兴趣（来自非常精确的AJAX响应）。在这种情况下，数据层变量’s Name should be attribute.headers.Server .

创建之后 属性响应 Google跟踪代码管理器中的数据层变量’的调试。刷新预览和调试模式，并刷新AJAX表单所在的页面。

我填写了表格并提交了。然后我点击了最新的 ajaxComplete 预览和调试控制台中的事件，导航到“变量”选项卡，并找到新变量 dlv– attributes.response。这里’对我来说是这样的：

那’一个成功提交表单的消息。如果在您的情况下，该变量的值为 未定义 那么您应该开始寻找错误。最常见的是变量名称中的错别字或定义不正确的变量’的路径。有些人只是尝试使用响应代替 属性。响应Â

现在让’s创建在事件发生时触发的触发器 ajaxComplete和我们新的dataLayer变量包含文本 消息已成功发送.

转到触发器，然后单击新的
选择触发类型– 自订活动。如果你’对此重新定义，自定义事件=数据层事件。富裕的’AJAX侦听器会创建一个数据层事件（通过dataLayer.push方法），每次发出AJAX请求时。
输入活动名称– ajaxComplete
此触发器应在 一些自定义事件。
定义触发器触发的条件–Â dlv– attributes.responseÂ 包含Â 消息已成功发送.

重要提示：没有一个答案

提交表单后，并非所有AJAX表单都返回相同的响应。在某些情况下， 属性响应 足以获得响应的价值。但是，在其他情况下， 响应Â 对象可能包含更多键，例如：

属性: {
  response: {
Â    message: "form submitted"Â 
 Â }Â 
}

在这种情况下，我们有属性目的。在里面，有一个响应目的。在那里面，有一个信息目的。如果您想访问讯息密钥，您需要输入 attribute.response.message 在您的数据层变量中。

让’s Test

将此新触发器分配给您在本博文开头创建的Google Analytics（分析）标签。
打开（或刷新）预览和调试模式，使用要跟踪的表单刷新网页。
然后填写AJAX表单并提交。成功提交后，应触发Google Analytics（分析）标记（它将以“预览”和“调试”模式显示。您还可以检查Google Analytics（分析）实时事件报告）。如果您看到代码触发，但该事件在GA实时报告中不可见，阅读本指南.

跟踪AJAX表单时要记住的事情：

表单的响应可能看起来有所不同，因此请尝试根据您的情况调整我的教程。
如果开发人员更改响应’的数据，您的触发器将失败。通知开发人员有关您的GTM实施的信息。
如果页面包含多个AJAX表单，请尝试在数据层中查找更多信息，以帮助Google跟踪代码管理器分辨出这些表单之间的区别。

万一Google跟踪代码管理器AJAX表单跟踪没有’t Work for You

我创建了一个非常详细的 Google跟踪代码管理器表单跟踪指南其中包括许多不同的表单跟踪技术。如果此Google跟踪代码管理器AJAX表单跟踪方法没有’为您服务，请确保您选中其他选项在这里提到.

如有疑问，请随时通过社交媒体帐户与我联系或发表评论在这篇博客文章中.