使用Google跟踪代码管理器跟踪评论：从A到Z的所有内容

如果你’在运行博客，论坛或其他网站（读者可以在其中表达意见并进行讨论）时，您绝对应该衡量评论的提交。借助Google跟踪代码管理器，您可以将数据发送到其他网络分析工具，例如Google Analytics（分析）。

通过跟踪评论，您’我们将能够看到哪些内容最能吸引用户参与，因此可以更好地了解您的读者喜欢或不喜欢的内容，因为浏览量不一定是优质可爱内容的一个好兆头。

在这份综合指南中，我’将向您展示如何使用Google跟踪代码管理器跟踪评论，以及如何将这些数据作为事件发送到Google Analytics（分析）。

注意： this blog post teaches how 至 track events with Universal Analytics. 如果你 want 至 get familiar with event tracking in Google Analytics 4, 您还可以参考此博客文章.

目录

• 各种评论框
• 标签+触发
• 您应该选择哪种评论跟踪方法？
• ＃1流行评论框的现成解决方案
• ＃2。 GTM中的默认表单提交触发器
• ＃3。 AJAX评论框跟踪
• ＃4。数据层事件
• ＃5。其他方法如何使用Google跟踪代码管理器跟踪评论
• 结论

各种评论框

就像 表格追踪，有太多不同类型/评论框的解决方案。其中一些刷新页面，而其他一些仅显示成功消息，而对页面本身没有多大作用。一些评论框是由Facebook或Disqus等知名公司开发的，而其他评论框则由您（或您的客户）雇用的自由职业者创建。

结果，没有“一种跟踪它们的方法”. You’我需要分析评论框在您的网站上的工作方式，并使用一种跟踪方法’本指南中已介绍。

在继续之前：标记+触发

您可能已经熟悉Google跟踪代码管理器的主要概念：您要跟踪的每次互动都需要一个代码和一个触发器。如果您想使用Google Analytics（分析）追踪所有评论提交，则必须在必须触发该标记时创建一个Google Analytics（分析）标记和一个触发器（规则）。创建标签是此过程的简单部分。让我们做一个， 您将在本指南的下一章中使用它:

1. 前往标签
2. 按 新 纽扣
3. 在 标签配置 选择Universal Analytics：
   1. 轨道类型– 事件
   2. 活动类别– 评论提交 （随时选择其他合适的标题）
   3. 事件动作– {{页面网址}}。
   4. 事件标签–此字段是可选字段，因此我们’这次将其留空。附言随时为事件类别，操作和标签选择其他值。
   5. 分配 Google Analytics（分析）设置变量 （包含跟踪ID，例如UA-XXXXXX-XX）。
   6. 保留其他字段不变。
4. 将触发部分留空（暂时），然后单击 保存。我们稍后会再讨论。这篇博客文章的80％致力于您可以使用的各种类型的触发器。触发类型的选择取决于注释框的开发方式。

您应该选择哪种评论跟踪方法？

I’在另一篇博客文章中创建了类似的流程图， 如何使用Google跟踪代码管理器跟踪表单，但进行了一些修改。由于它收到了很多积极的反馈，因此您可以放心，很快就能得到最好的结果。

在深入探讨池触发器之前，我们需要检查一个注释框并确定哪种技术最适合我们的需求。我准备了一个流程图，该流程图可以帮助您选择正确的方法来使用Google跟踪代码管理器跟踪评论。

我敢肯定，该计划的某些部分可能看起来模棱两可。继续阅读，一切将变得更加清晰。

＃1流行评论框的现成解决方案

你很有可能’重新使用一个著名的评论插件。为什么这是个好消息？它’那里很有可能’是一个在线跟踪发布的现成的跟踪解决方案，并提供了分步教程。根据我的经验，两个最著名的评论插件是 Facebook评论 and Disqus评论.

您如何知道哪个提供者开发了注释框’重新使用？有几种选择：

• 也许您已经知道了，因为您’在您的WordPress网站（或您使用的任何内容管理系统）上安装了插件？
• 您可以问一个开发人员，也许他/她知道。
• 另一种选择是寻找品牌的徽标或其他标志。例如，Disqus注释框在右下角包含一个徽标。
  
• 最后一个选项有点技术性。尝试使用浏览器检查评论框’的开发人员工具。可能有一些迹象表明公司开发了此注释框。例如这里’右键单击“ Disqus 评论”框并查找一些名称或链接后，我发现了什么。
  
• 没有运气？您’重新使用定制的评论解决方案。在这种情况下，请跳过本章并转到下一章。

如果你 managed 至 identify the brand of the comment box, google for ready-made GTM solutions 和 you should find something.

如果没有，本指南中还有其他跟踪方法对您有用。

在撰写本文时，我已经发表了两篇有关如何使用Google Tag Manager跟踪评论的博客文章：

1. Facebook评论
2. Disqus评论。

为了使您的生活更轻松，这两个指南（上面已发布）均包含GTM食谱，现成的容器模板。您只需下载文件，导入到GTM并在几分钟之内开始跟踪评论即可。

＃2。 GTM中的默认表单提交触发器

您可以随心所欲地调用它，但是注释框只不过是表单而已，因此您必须将它们作为表单进行跟踪。你应该试试看 GTM的内置表单侦听器.

在您的GTM帐户中打开变量列表。在内置变量下，单击 配置 并在右侧栏中启用所有Form变量（所有更改都会自动保存）。

然后打开所有触发器的列表（通过单击 扳机 在左侧边栏中）。创建新触发器：

• 标题–“所有表单提交”。
• 触发类型– 表单提交。
• 离开 等待标签 未选中（目前）。稍后，您可以将其设置为2000毫秒，这意味着页面将在提交表单/评论框后仅2秒重新加载。 2000毫秒应该足以触发Google Analytics（分析）事件代码。
• 请点击 检查验证 复选框。选中此选项后，如果阻止了表单的默认操作（提交和重定向），则GTM将不会触发触发器。如果未选中该复选框，则无论何时注册了一个提交事件（即使表单提交有错误（例如，几个必填字段都留为空白）），触发器都将关闭。
• 开火。在此示例中，我想跟踪所有表格。

现在，让我们使用GTM的“预览和调试”模式来了解默认表单自动事件监听器是否对我们有用。在您的Google跟踪代码管理器帐户的右上角，单击“预览”。

启用预览模式后，导航至嵌入了注释框的站点，您将在浏览器底部看到一个调试控制台，其中显示有关标签的详细信息，包括其触发状态和正在处理的数据。该控制台窗口仅在您预览站点时出现在您的计算机上，其他网站访问者看不到。它看起来应该像这样：

如果你 have already opened 那 page with the comment box but don’t see the GTM debug console, refresh the page. 如果你 still face problems, I suggest reading this blog post, 如何修复GTM预览和调试模式.

让我们回到如何使用Google跟踪代码管理器跟踪评论。填写评论框（尽量不要将任何字段留空）：

1. 点击提交按钮。做了一个 gtm.formSubmit 事件出现在预览和调试控制台中？如果没有，那么GTM的 表单自动事件监听器不适用于此注释框 您应该跳到本指南中介绍的下一个评论跟踪选项。
   
2. 如果gtm.formSubmit事件确实出现在预览和调试控制台中，那么您应该进行另一项测试-尝试至少保留一个必填的注释字段为空（例如 名称），然后再次提交评论。这样，您可以在评论框中模仿错误：
   1. 如果gtm.formSubmit事件再次触发，则应检查此博客文章中提到的其他评论跟踪选项。为什么？对于您而言，无论注释是否成功提交，触发器始终会触发。你不’不想追踪错误的提交，对吗？
   2. 如果gtm.formSubmit事件没有触发，那就太好了！这意味着GTM将仅跟踪那些已成功完成的评论提交（这正是您所需要的）。

大！我们确定可以使用GTM的内置表单侦听器来跟踪我们的评论框。让我们创建一个专门用于 该类型的表单，即注释框。 还记得之前提到的gtm.formSubmit事件吗？单击它（在“预览和调试”模式下），然后单击“变量”。

然后向下滚动并开始寻找 形成 唯一的变量 那 评论框。通常，注释框具有不同的表单类（例如 comment_box）。使用它作为触发条件。如您在下图中所看到的，我已经提交了一条评论（其Form Class变量是comment_box）。

现在，让’在触发器中使用它：

1. 转到触发器，然后单击 新
2. 请点击 触发配置 部分并选择触发类型– 表格提交
3. 请点击 检查验证 and set the rule 页面URL匹配正则表达式（。*）. This rule means 那 this comment submission trigger will be available on all pages. 如果你 want 至 make it accessible only on particular pages, you can add more specific rules, such as 页面网址包含/ post / （取决于您的评论框所在的网址）。
4. 然后将此触发器配置为仅在 一些形式 并输入以下规则： 表格类等于comment_box. 包含 运算符也很好。
   1. 如果你 don’t see 形成 Classes variable – Enable it in the list of Built-in variables of Google Tag Manager.
   2. 在您的情况下，form class的值可能（并且可能会有所不同）（与我的示例相比）。
      

让’s test

1. 将此新触发器分配给您在本博文开头创建的Google Analytics（分析）标签。
2. 打开（或刷新）预览和调试模式，使用要跟踪的表单刷新网页。
3. 然后填写评论框并提交-如果Google Analytics（分析）代码被触发，那就是个好消息！

Wow! You still reading! Thanks for the dedication. 如果你 feel a bit tired, you can always bookmark this guide how 至 track comments with Google Tag Manager 和 come back anytime later.

＃3。 AJAX评论框跟踪

如果您正在阅读此部分，则您的自定义注释框可能会刷新自身，然后显示“您的注释已成功提交”消息，而没有实际的页面刷新。此注释框很有可能正在使用AJAX。我建议在此跳过所有技术性的笨拙（因为我不是开发人员，而且我认为我无法清楚地解释其工作原理）。您唯一应该知道的是 AJAX 听众。

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 至  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 至  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 至  the dataLayer because this fires within GTM
 dataLayer.push({
 'event': 'ajaxComplete',
 'attributes': {
 // Return empty strings 至  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 至  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>

通过自定义HTML标签安装Lunametrics的AJAX侦听器后，请检查您的注释框是否正在使用AJAX技术：

1. 启用（或刷新）预览和调试模式。
2. 用注释框刷新网页。
3. 尝试提交评论（填写所有字段）。
4. 是否 ajaxComplete 事件出现在预览和调试控制台中？
   1. 如果是，则说明框正在使用AJAX。
   2. 如果否，请跳至本指南的下一章。

哦，你还在读书吗？让我们看看该AJAX评论框能做什么。在预览和调试模式下单击ajaxComplete事件，然后单击数据层：

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

让我们仔细看看。您能看到一条消息“ 此消息已成功发送”？答对了！我们可以将其用作触发器。

附言某些表单或注释框会触发多个AJAX请求，因此您需要在“数据层”选项卡中检查这两个事件，并尝试确定哪个事件包含成功提交注释的信息。

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

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

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

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

在我们创建一个 属性响应 Google跟踪代码管理器中的数据层变量，让我们进行调试。刷新预览和调试模式并刷新AJAX注释框所在的页面。我正在使用演示编写博客文章 从这个网站 （使用示例1）。填写评论并提交。在``预览和调试''控制台中单击最新的ajaxComplete事件，然后导航到``变量''选项卡并找到新变量 dlv – attribute.response. 如果你 did everything correctly, it should look like this:

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

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

1. 转到触发器，然后单击 新
2. Choose Trigger Type – Custom 事件. 如果你’re new 至 this, 自订活动 = Data Layer event. Lunametrics’ AJAX listener creates a Data Layer event (通过dataLayer.push方法），每次发出AJAX请求时。
3. 输入事件名称– ajaxComplete
4. 此触发器应触发 一些自定义事件。
5. 定义触发器触发的条件– dlv – attribute.response 包含 消息已成功发送.

让’s test

1. 将此新触发器分配给您在本博文开头创建的Google Analytics（分析）标记。
2. 打开（或刷新）预览和调试模式，使用要跟踪的注释框刷新网页。
3. 然后填写AJAX注释框并提交。成功提交后，应触发Google Analytics（分析）标记（它将以“预览”和“调试”模式显示。您还可以检查 Google Analytics（分析）实时事件报告）。

跟踪AJAX注释框时要记住的事项：

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

＃4。数据层事件

免责声明： 尽管这种使用Google跟踪代码管理器跟踪评论的方法比方法3（AJAX）更强大，但出于某种原因，我将其作为此列表中的第4个选项。当其他营销人员向我寻求评论跟踪建议时，他们期待可以避免开发人员投入的解决方案。

口号“在没有开发人员帮助的情况下管理营销标签”是他们开始考虑使用Google跟踪代码管理器的主要原因之一。该声明是GTM推出时的关键“卖点”之一，因此，营销人员期望这是100％正确的说法并不奇怪，尽管您应该知道，在很多情况下，强烈建议开发人员提供帮助。我在这里的位置是：

1. 如果你 have access 至 developers 和 Google Tag Manager’s 形成 listener isn’t working for you, I recommend using window.dataLayer.push 我将在稍后描述的方法。
2. 如果您无权访问开发人员，或者他们很忙（也许很忙），那么可以跟踪此博客文章中提到的其他技术。请注意，当开发人员对您要跟踪的网站进行更改时，其他解决方案更有可能被打破。这尤其适用于以下章节中提到的技术– DOM抓取 和“元素可见性触发器”。

我希望我的观点明确，我们可以继续。

如上所述，如果标准的Google跟踪代码管理器表单侦听器无法与您的注释框一起使用，那么下一个最好的事情就是要求开发人员实施自定义 window.dataLayer.push（） 到成功提交评论后调用的回调函数中。该段代码可能类似于：

<script>
 window.dataLayer.push({
 'event': 'commentSubmission',
 'pageTitle': 'This is a page title' //this should be dynamically changed (based on the page the visitor is on) 
});
</script>

您需要为开发人员准备简短但写得好且清晰的任务：

1. 首先，为活动选择一个名称。在上面的示例中，我选择了 评论提交。
2. 然后考虑您可能需要的任何其他数据。写下这些数据点，然后尝试对其进行分类。在我的示例中，我认为知道提交评论的页面的标题是有用的。
3. 如果开发人员通常不熟悉dataLayer事件和Google跟踪代码管理器，请将此链接交给他们 数据层指南. Explain 至 them 那 you need an event 和 (if possible) one additional variable pushed into the dataLayer after the successful comment submission. 如果你 need, you can ask for more data 至 be passed.
4. 切记：如果您愿意，请不要要求开发人员传递任何个人数据’正在与GA合作。 Google严格反对PII（个人身份信息）存储在Google Analytics（分析）中。

做完了！开发人员实施后 window.dataLayer.push 在所有注释框中，您应该对其进行测试：

1. 打开预览和调试模式。
2. 用注释框刷新页面。
3. 尝试提交评论：
   1. 将至少一个必填字段留空。在这种情况下，不得推送dataLayer事件。
   2. 填写所有字段，然后尝试再次提交。该事件是否出现在“预览和调试”控制台中？它看起来应该像这样：
      
   3. 检查是否所有数据都已正确推送到dataLayer。请点击 评论提交 事件，然后在“预览”控制台中打开“数据层”选项卡。数据应如下所示：
      

在GTM中设置变量和触发器。在我的 window.dataLayer.push 例如，有一个数据点我想用作变量– 页面标题, 因此我需要通过创建数据层变量将其包括到Google跟踪代码管理器中。

标题： dlv – pageTitle
变量类型： 数据层变量
数据层变量名称： 页面标题
保留所有其他设置

现在，让我们创建一个触发器。转到触发器，然后单击新建。输入以下设置：

触发类型： Custom event
活动名称： commentSubmission（根据您的情况可能有所不同。只需确保您和开发人员使用相同的名称）。
此触发器将触发： 所有自定义事件。这意味着将跟踪所有commentSubmission事件。

让’s test

1. 将此新触发器分配给您在本博文开头创建的Google Analytics（分析）标记。
2. 打开（或刷新）预览和调试模式，使用要跟踪的注释框刷新网页。
3. 然后填写评论框并提交。成功提交后，应触发Google Analytics（分析）标记（它将以“预览”和“调试”模式显示。您还可以检查 Google Analytics（分析）实时事件报告）。

小费： 在本章中，建议您对Google Analytics（分析）事件代码进行一些更改。在这篇博客文章的开头，我建议创建一个具有以下值的GA事件代码：

• 表格提交 as 事件 Category
• {{页面网址}} 作为事件动作
• 空事件标签。

由于我们要求开发人员通过window.dataLayer.push添加其他变量，因此我们可以使用此数据并将其推送到GA。我们可以更改：

• 事件类别应保持不变， C提交意见
• 事件动作–从 {{页面网址}} 至 页： {{dlv– 页面标题}}
• 将事件标签设置为 {{页面网址}}

How will this event be displayed in Google Analytics event reports? 这里’s an example:

• 活动类别： 评论提交
• 事件动作： 页面：这是页面标题
• 活动标签： //www.toddblog.net/mega-blog-post/

＃5。其他解决方案

由于它们不是超级可靠，因此我不会深入介绍以下两种方法。为什么？因为他们严重依赖您的网页 ’的代码结构。如果开发人员不断更新页面的设计，添加新元素或删除旧元素，则您’可能有一天您的触发器将停止工作。

最糟糕的是你赢了’不要在同一天注意到它。有时，我们在事件发生后一周（甚至更晚）才发现丢失事件的问题，而对于营销人员和网络分析师而言，丢失数据一周是相当大的损失。因此，您必须权衡使用以下两种注释跟踪方法的风险：

• 元素可见性触发器。 当特定元素出现在屏幕上时，它将触发“数据层”事件。就您而言，应该是“评论已成功提交”信息。 MeasureSchool的Julian有 发布了一个视频 他使用此触发器跟踪成功和错误消息。
• DOM搜寻。它’一种检查特定Web元素的值的技术。如果页面重新加载并且“Thank you”消息出现时，您可以抓取DOM以便对其进行跟踪。您可以 在这里找到更详细的指南.

结论：如何使用Google跟踪代码管理器跟踪评论

注释框是表格，因此您必须将其视为表格。这意味着没有一种适用于所有评论框的评论跟踪方法。

在这篇博客中，我’ve分享了几种最常见的技术，这些技术如何使用Google跟踪代码管理器跟踪评论。首先，您应该检查注释框，看看是否’是由Facebook或Disqus等知名公司开发的。在那种情况下’你很有可能’可以找到现成的评论跟踪GTM解决方案。

没有运气？然后，您应该尝试在GTM或自定义AJAX侦听器中实现默认的表单提交触发器。

如果你 have access 至 developers, your most robust solution would be 至 ask them 至 fire a Data Layer event when a comment is successfully submitted. You could then catch 那 event 和 turn it into a trigger.

和我 ’ve还提到了两种危险的注释跟踪技术，即DOM抓取和元素可见性触发。但应将它们视为万不得已。

您对如何使用Google跟踪代码管理器跟踪评论有任何疑问吗？随时在下面的评论部分中询问他们。标记愉快！