谷歌分析无法跟踪链接点击事件

Question

我目前正在使用analytics.js（GA的新版本），并尝试跟踪来自我的网站的所有类型事件，包括用户点击指向外部URL的锚点标签。

我目前正在使用以下设置：

 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-KEY-HERE', { 'alwaysSendReferrer': true, 'allowAnchor': true });

当我点击如下链接时，会触发事件：

$(document).on("click", ".anchor-class", function (event) {
    label = //get data from anchor element here ...  
    ga('send', 'event', 'Link Clicked', 'Click Details', label);;
    return;
    }
});

这并不会发送任何内容到Google Analytics（即使事件处理程序调用了ga(send...)方法）。 然而，如果我在函数开头使用 event.preventDefault(); ，并采用相同的技术，则该事件将被发送，并出现在GA仪表板中。

是否有一些设置被忽略以便使这个功能正常工作？

- Tamas Ionut

---

在函数返回之前尝试使用短暂的超时时间，因为在用户被带到外部URL之前可能没有足够的时间发送跟踪请求。 - Eike Pierstorff

在返回之前添加了setTimeout(function () { }, 5050);，但没有改变任何东西。 - Tamas Ionut

使用超时是一种不好的方法，因为你要么会不必要地等待，要么可能等待的时间不够。 - CTS_AE

Answer 1

使用hitCallback函数：

  $(document).on('click','a', function(event){
    event.preventDefault();
    var label = $(this).attr('href');

    ga('send', 'event', 'Link Clicked', 'Click Details', label, {
      'hitCallback': function(){
        window.location.href = label;
      }
    });
  });

- Blexy

---

hitCallback没有被调用。我已经添加了'hitCallback': function(){alert('ga completed')}，但是没有弹出警告框。 - Tamas Ionut

函数是否被包含在 $(document).ready(function(){the code above}); 中？你能分享一下网站吗？ - Blexy

不，该函数是写在$(document).ready函数之外的。我已经设法解决了（有点），通过在将代码发送到GA后1000毫秒内在setTimeout函数中调用window.location.href = label;，但我认为这不是最好的方法。 - Tamas Ionut

Answer 2

正如Blexy所指出的那样，正确的方法是使用一个命中回调函数。然而，你还需要考虑到用户可能会使用一些隐私保护工具（例如Ghostery）来阻止Google Analytics，这种情况下命中回调将永远不会被执行。以下文章解释了如何正确实现这一点：

http://veithen.github.io/2015/01/24/outbound-link-tracking.html

- Andreas Veithen

Answer 3

我们目前遇到了这个问题，将我们的分析代码从网站移植到了GTM中。另一个问题是，我们有数百个网站无法发布新代码以废弃页面上的分析，但我们已经在它们上面使用了GTM。

我们能够找到绑定到点击事件的jQuery事件，并编写代码在GTM中通过确切的事件处理程序删除那些被点击按钮上的jQuery事件。然后，我们能够应用标准的GTM点击触发器和标签，以便我们不会出现重复事件。

假设您可以轻松地从页面中删除代码，则以下内容应该使用GTM非常好。

当用户单击给定元素时，这将向分析触发事件，并使任何导航等待相应的标记完成后再让页面导航离开。

GTM实施

这是使用较新的GTM的快速和标准方法。

预设置

变量

• 您需要访问Click Element内置变量。您可以在变量 --> 配置 --> Click Element下启用它。
• 还要启用Page Path或Page URL内置变量。这将帮助您确定在哪些页面上运行触发器。
• 看起来您正在尝试从点击的元素中获取一些文本以进行事件处理。如果是这样，您应该创建一个自定义JavaScript变量。这只是获取元素的内部文本，但您也可以在此步骤中获取属性或其他数据。
• 名称：Click Element - Inner Text
• 变量类型：自定义JavaScript
• 自定义JavaScript：function() { return {{Click Element}}.innerText; }

触发器

创建新的触发器

• 触发类型: 点击 - 仅链接
• 等待标签: 启用此功能，这就是您要寻找的魔法。
  • 最大等待时间: 将其设置为您认为合适的时间，如果您可以接受可能会失去一些分析数据以换取更好的用户体验。想象一下3G用户在移动设备上的等待时间可能是多少。5000毫秒足够吗？不够？也许是10000毫秒。用户可能已经意识到他们的连接很差。
• 当所有这些条件都为真时启用此触发器:
  • 注意: 您应该只在需要运行它的页面上运行此操作。Google没有明确说明是否会有性能损失，他们的“了解更多”也没有提到这一点。
  • 如果您需要在所有页面上运行此操作，请进行以下配置:
    • 页面路径 匹配正则表达式 .*
  • 否则，您应该编写类似于以下内容的内容:
    • 页面路径 匹配正则表达式 ^/path/my-page$ 特定页面
    • 页面路径 匹配正则表达式 ^/path/my-page/.*
    • 注意: 我不确定这些正则表达式是否正确，我不确定您是否会得到一个前导或附加的正斜杠/或者您是否需要锚点 - 通常最好明确指定锚点，以免出现任何有趣的事情。
• 此触发器触发于: 某些链接点击
• 当事件发生并且所有这些条件都为真时触发此触发器。选择适合您需求的其中一项，并根据需要进行更改。
  • 单击元素 匹配CSS选择器 a
  • 或者可能更具体的内容？
  • 单击元素 匹配CSS选择器 .container .calls-to-action a
  • 也许只在外部链接上？假设所有内部链接都是相关的路径。
  • 单击元素 匹配CSS选择器 a[href^="http"]

标签

创建新标签

• 标签类型: 事件
• 类别: 链接点击
• 动作: 点击详情
• 标签: {{点击元素-内部文本}}
• Google Analytics 设置: 最好使用这些设置以实现可重用性和一致性，而不是手动设置。
• 触发器: 您上面创建的链接点击触发器。

- CTS_AE