使用Google Analytics（分析）跟踪DISQUS评论and GTM

更新时间：2017年5月12日。 争议 是在任何网站上安装评论的简便解决方案。只需添加一小段代码，您就可以使您的读者发表评论。’ll向您展示如何使用Google Analytics（分析）（通过Google跟踪代码管理器）跟踪DISQUS注释。

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

在你之后 已安装的DISQUS在一个网站上，登录到您的Google跟踪代码管理器并创建用于监视评论提交的自定义侦听器。

对于那些着急的人，我为Google跟踪代码管理器（也称为GTM食谱）创建了易于导入的模板。只需单击下面的按钮，按照说明进行操作，即可立即开始跟踪DISQUS注释。如果您想了解其工作原理，请继续阅读。

Google跟踪代码管理器的DISQUS侦听器

首先你’需要在Google跟踪代码管理器中创建自定义HTML代码。它将听取意见提交。访客发布评论后，DISQUS自动事件侦听器将触发一个dataLayer事件（将用作触发器）。

自定义HTML标签’s settings are:

• 标题– 的HTML– DISQUS Listener
• 类型– 自订HTML
• 粘贴此代码（我在 艾萨克·阿布拉莫维兹（Isaac Abramowitz）’s blog）：

  <script>
   var disqus_config = function () {
   this.page.url = '{{Page URL}}'; // Replace PAGE_URL with your page's canonical URL variable
   this.page.identifier = '{{YOUR_UNIQUE_DISQUS_ID}}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
   this.callbacks.onNewComment = [function() {
   window.dataLayer = window.dataLayer || [];
   window.dataLayer.push({
   'event': 'disqus_comment'
   });
   }];
   };
  </script>

重要：Â您需要用自己的{{YOUR_UNIQUE_DISQUS_ID}}（第4行）替换。为此，请打开您的DISQUS安装代码并查找 this.page.identifier（如果你 can’t find it, you’重新使用WordPress插件。继续阅读，我’将解释解决方法。）

复制它（不带引号），然后粘贴到GTM中的自定义HTML标记中。这里’s an example:

<script>
 var disqus_config = function () {
 this.page.url = '{{Page URL}}'; // Replace PAGE_URL with your page's canonical URL variable
 this.page.identifier = '4991950000'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
 this.callbacks.onNewComment = [function() {
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'disqus_comment'
 });
 }];
 };
</script>

保存标签。

 

 

让’的测试DISQUS侦听器

现在，让’s use GTM’s的``预览和调试''模式可确定有人发表评论时DISQUS侦听器是否触发dataLayer事件。在Google跟踪代码管理器帐户的右上角，展开``发布''按钮’s options and click “Preview”.

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

现在，使用DISQUS评论小部件编写并发布评论。 Disqus_comment event should appear.

Disqus_comment 事件表明有人在我们的网站上发表了评论。我们可以将其用作触发Google Analytics（分析）事件的触发器。’s continue.

 

变量和触发器

在GTM中创建触发器之前，请确保 页面网址 变量已在Google跟踪代码管理器中的其他内置变量中启用。

然后，使用以下设置创建触发器：

• 标题– 自订– DISQUS Comment
• 类型– 自订Event
• 活动名称– disqus_comment
• 这会触发– 所有自定义事件

 

创建Google Analytics（分析）事件代码

好的，因此您已经创建了DISQUS侦听器和自定义触发器。最后丢失的部分是Google Analytics Event标记，它将数据发送到GA。

转到标签并点击 新的，然后输入以下设置：

• 标签类型– 通用分析
• 跟踪号码–输入您的Google Analytics（分析）ID。我用了我的常数– 不变– GA UA
• 轨道类型– 事件
• 活动类别– Disqus评论
• 活动类别– {{页面网址}}。每次触发事件时，Google跟踪代码管理器都会通过网站’提交评论事件的页面地址。
• 在触发部分中，选择新创建的自定义触发器。

 

让’s Test!

刷新预览和调试模式。此外，刷新页面’重新测试DISQUS跟踪。

1. 检查是否仅在提交评论时才触发Google Analytics（分析）事件代码。
2. 查看Google Analytics（分析）实时事件报告。你的 Disqus评论 应该在几秒钟内出现在那儿。

如果你’在预览和调试模式下遇到了一些问题， 阅读此博客文章.

 

注意，WordPress用户！

读这篇，如果你’已使用安装了Disqus评论 WordPress插件.

显然， this.page.identifierÂ（这是该Disqus跟踪工作的关键要素）可能具有两个可能值之一。第一个是前面提到的唯一的Disqus ID（例如4991950000）。但是那’WordPress插件并非如此。

当您安装WP插件时，它会向您的网站注入其他的Disqus脚本并使用 帖子ID + 页面网址 作为唯一标识符（而不是字符串或随机数）。

这需要您进行修改 Disqus侦听器’s 代码并动态生成新的标识符。继续阅读，我’ll解释如何做到这一点。

 

解决方法的要求

为了在WordPress网站上使用Google Analytics（分析）跟踪Disqus评论，您需要’需要完成以下步骤：

• 有一个 金霸王’的Google跟踪代码管理器插件Â已安装在您的WP站点上并对其进行配置。
• 附加变量，返回帖子ID。
• 附加变量，它返回协议（http或https）。
• 最后，你’我需要对Disqus侦听器进行一些小的更改’s code.

 

杜拉雷尔’s GTM Plugin

安装后 这个WP插件，在您的WordPress管理员中，转到 设定> Google Tag Manager > Basic > Posts 然后打勾 职位编号 复选框。然后，单击“保存更改”。

您在这里所做的是每次页面加载时，GTM插件都会将Post ID值推送到数据层，该值可以通过GTM轻松提取并在您的Disqus侦听器中使用’s code.

现在，启用 GTM预览和调试模式，刷新您的网站窗口，然后在P中选择“网页浏览”事件&D控制台。然后，单击数据层，您应该看到postID。

 

创建两个变量

现在，我们需要从数据层提取postID并将其转换为Google跟踪代码管理器容器中的变量。在您的GTM帐户中，使用以下设置创建一个新的数据层变量（dlv 代表数据层变量）：

让’s返回到我们的Disqus标识符。

在WordPress中，这包含以下数据点：

• 职位编号–由于先前创建的数据层变量，我们可以在GTM内的任何代码或触发器中使用此数据。
• 通讯协定（https或https）– we’因为默认情况下该数据在GTM中不可用，所以需要创建一个附加的用户定义变量。
• 主机名（子域或域）–由于GTM中内置了Page Hostname变量，因此该数据已经可用。
• /？=postID –由于DLV变量，这部分也不会造成任何问题 职位编号.

让’s创建另一个返回协议（http或https）的变量：

 

编辑Disqus侦听器’s Code

现在，打开Disqus Listener’s code and look for this.page.url.

<script>
 var disqus_config = function () {
 this.page.url = '{{Page URL}}'; // Replace PAGE_URL with your page's canonical URL variable
 this.page.identifier = '4991950000'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
 this.callbacks.onNewComment = [function() {
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 'event': 'disqus_comment'
 });
 }];
 };
</script>

在上面的示例中，其值为4991950000。但是在WordPress中’在这种情况下，我们必须自己构造它（以匹配下面的标识符）。

由于我们已经创建了所有必需的变量，因此可以非常轻松地实现。在Disqus侦听器中，而不是：

this.page.identifier = '4991950000';

编写这段代码：

this.page.identifier = '{{dlv - postID}} {{url -协议}}：// {{页面主机名}}？p = {{dlv- postID}}';

Google跟踪代码管理器的另一个出色功能是，它可以用实际数据动态替换变量。如果GTM在标签，触发器或变量中的任意位置发现了{{variable}}，它将用该特定时刻可用的实际数据替换值，例如：

• 代替 {{dlv– postID}} Google跟踪代码管理器会添加帖子ID（例如1234）。
• 代替 {{url– protocol}} 它将返回http或https（取决于您的网站’s configuration).
• 代替 {{页面主机名}} 它将返回带有子域的域，例如blog.example.com。

结果，Google跟踪代码管理器会将此 ‘{{dlv – postID}} {{url –协议}}：// {{页面主机名}}？p = {{dlv– postID}}’ 进入这个 ‘1234 //www.example.com?p=1234’.

那’它！保存Disqus侦听器’s标签，刷新预览和调试模式，刷新您的网站 ’的窗口。尝试提交新的评论，并且应显示disqus_comment GTM事件。

 

使用Google Analytics（分析）跟踪DISQUS评论– Conclusion

如您所见，它’使用Google Analytics（分析）和Google跟踪代码管理器可以轻松跟踪DISQUS评论。只需创建一个自定义HTML标签（1），添加您的DISQUS唯一标识符（2），创建一个触发器（3）和Google Analytics（分析）事件标签（4）。

如果你’重新使用Disqus WordPress插件，您’我将需要做一个额外的（但很简单）的配置来完成这项工作。