Google Analytics不会跟踪链接点击事件

I am currently using analytics.js (the newer version of GA) and I am trying to track all types of events from my website, including when a user clicks on an anchor tag pointing to an external URL. I am currently using this setup:

我目前正在使用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 });

and I send the events when hitting a link like this:

当我点击这样的链接时发送事件:

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

and this does not send anything to GA (even though the event handler is calling the ga(send...) method). How ever, if I use this exact technique for but with event.preventDefault(); at the beginning of the function, the event is sent and it appears in GA dashboard.

并且这不会向GA发送任何内容(即使事件处理程序正在调用ga(send ...)方法)。但是,如果我使用这个确切的技术但是使用event.preventDefault();在功能开始时,事件将被发送并显示在GA仪表板中。

Is there some setting that I missed in order to make this work properly?

为了使这项工作正常,我错过了一些设置吗?

3 个解决方案

#1

Use the hitCallback function:

使用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;
      }
    });
  });

#2

As pointed out by Blexy, the correct way to do this is to use a hit callback. However, you also need to take into account that users may block Google Analytics using some privacy protection tool such as Ghostery, in which case the hit callback will never be executed. The following article explains how to implement this correctly:

正如Blexy所指出的,正确的方法是使用命中回调。但是,您还需要考虑用户可能会使用某些隐私保护工具(例如Ghostery)阻止Google Analytics,在这种情况下,点击回调将永远不会被执行。以下文章解释了如何正确实现此功能:

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

#3

We currently had this issue and ported our analytics code off of the website and into GTM. Another issue is that we have hundreds of sites that cannot have the new code released to them to deprecate the on-page analytics, but we already had GTM on them.

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

We were able to find the jQuery events that were bound to the click event and write code in GTM that removes the jQuery event on those clicked buttons via the exact event handler. Then we were able to apply standard GTM click triggers and tags so we didn't get double eventing.

我们能够找到绑定到click事件的jQuery事件,并在GTM中编写代码,通过精确的事件处理程序删除这些单击按钮上的jQuery事件。然后我们能够应用标准的GTM点击触发器和标签,因此我们没有得到双重事件。

Assuming you can easily remove the code from the page the following should work great using GTM.

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

This will fire an event off to analytics when a user clicks a given element and it will make any navigation wait until the corresponding tags have finished firing first before letting the page navigate away.

当用户单击给定元素时,这将触发事件到分析,并且它将使任何导航等待,直到相应的标记在让页面离开之前首先完成触发。

GTM Implementation

This is the quick and standard way now with the newer GTM.

这是现在使用更新的GTM的快速和标准方式。

Pre-Setup

Variables

• You will need access to the Click Element Built-In variable. You can enable this under Variables --> Configure --> Click Element.

您需要访问Click Element Built-In变量。您可以在“变量” - >“配置” - >“单击元素”下启用此功能。

• Also enable the Page Path or Page URL Built-In variable. This is later used to help you determine which pages to run the trigger on.

还启用Page Path或Page URL Built-In变量。这稍后用于帮助您确定要在哪个页面上运行触发器。

• It looks like you're trying to get some text off of the clicked element for the event. If so you should create a Custom JavaScript variable. This just gets the inner text of the element, but you could also get an attribute or whatever other data you're looking for at this step.

看起来你正试图从事件的点击元素中获取一些文本。如果是这样,您应该创建一个自定义JavaScript变量。这只是获取元素的内部文本,但您也可以在此步骤获取属性或您正在寻找的任何其他数据。

• Name: Click Element - Inner Text

名称:单击元素 - 内部文本

• Variable Type: Custom JavaScript

变量类型:自定义JavaScript

• Custom JavaScript: function() { return {{Click Element}}.innerText; }

自定义JavaScript:function(){return {{Click Element}}。innerText; }

Triggers

Create a new trigger

• Trigger Type: Click - Just Links

触发类型:单击 - 仅链接

• Wait for Tags: Enable this, this is the magic you're looking for.
  • Max wait time: set this to what you feel is appropriate and if you can live with the possibility that you may loose some analytics for a better user experience. Imagine what the wait time may be for a 3G user on a mobile device. Is 5000ms enough, not enough, maybe 10000ms. The user probably understands their connection is bad.

  最长等待时间:将此设置为您认为合适的内容,如果您可以忍受可能会丢失一些分析以获得更好的用户体验。想象一下移动设备上3G用户的等待时间。是5000毫秒足够,不够,也许10000毫秒。用户可能知道他们的连接很糟糕。

等待标签:启用此功能,这是您正在寻找的魔力。最长等待时间:将此设置为您认为合适的内容,如果您可以忍受可能会丢失一些分析以获得更好的用户体验。想象一下移动设备上3G用户的等待时间。是5000毫秒足够,不够,也许10000毫秒。用户可能知道他们的连接很糟糕。

• Enable this trigger when all of these conditions are true:
  • NOTE: you should only run this on pages that you need to run it on. Google isn't very clear if there is a performance loss and their "Learn More" says nothing about it.

  注意:您应该只在需要运行它的页面上运行它。如果性能下降并且他们的“了解更多”对此没有任何说明,谷歌就不是很清楚了。

  • If you need this to run on all pages though, configure it like so:
    • Page Path matches RegEx .*

    页面路径与RegEx匹配。*

  如果您需要在所有页面上运行,请按以下方式配置:页面路径与RegEx匹配。*

  • Otherwise you should write something like:
    • Page Path matches RegEx ^/path/my-page$ specific page

    页面路径与RegEx ^ / path / my-page $特定页面匹配

    • Page Path matches RegEx ^/path/my-page/.*

    页面路径匹配RegEx ^ / path / my-page /.*

    • NOTE: I'm not sure if those regex are correct, I'm not sure if you'll get a path with a proceeding or appended forward slash / or if you need anchors - normally it's best to be explicit on anchors so you don't get any funny business.

    注意:我不确定这些正则表达式是否正确,我不确定你是否会得到一个带有程序或附加正斜杠的路径/或者如果你需要锚点 - 通常最好是明确地使用锚点这样你就不要没有任何有趣的事情。

  否则你应该写一些类似的东西:Page Path匹配RegEx ^ / path / my-page $特定页面页面路径匹配RegEx ^ / path / my-page /.*注意:我不确定那些正则表达式是否正确,我'我不确定你是否会得到一个带有程序或附加正斜杠的路径/或者如果你需要锚点 - 通常最好明确锚点,这样你就不会得到任何有趣的业务。

满足所有这些条件时启用此触发器:注意:您应该只在需要运行它的页面上运行此触发器。如果性能下降并且他们的“了解更多”对此没有任何说明,谷歌就不是很清楚了。如果您需要在所有页面上运行它,请按如下方式进行配置:Page Path匹配RegEx。*否则您应该编写如下内容:Page Path匹配RegEx ^ / path / my-page $特定页面页面路径匹配RegEx ^ / path /my-page/.*注意:我不确定这些正则表达式是否正确,我不确定你是否会得到一个带有程序或附加正斜杠的路径/或者如果你需要锚点 - 通常最好是明确锚点,这样你就不会有任何有趣的事情。

• This trigger fires on: Some Link Clicks

此触发器触发:某些链接点击

• Fire this trigger when an Event occurs and all of these conditions are true. Choose one below that fits your needs and change it how you need it.
  • Click Element matches CSS selector a

  单击元素匹配CSS选择器a

  • or maybe something more specific?

  或者更具体的东西?

  • Click Element matches CSS selector .container .calls-to-action a

  单击元素匹配CSS选择器.container .calls-to-action a

  • maybe only on external links? Assuming all internal links are relevant pathing.

  也许只在外部链接?假设所有内部链接都是相关的路径。

  • Click Element matches CSS selector a[href^="http"]

  单击元素匹配CSS选择器a [href ^ =“http”]

当事件发生且所有这些条件都为真时触发此触发器。选择符合您需求的下方,并根据需要进行更改。单击元素匹配CSS选择器a或更具体的东西?单击元素匹配CSS选择器.container .calls-to-action a可能只在外部链接上?假设所有内部链接都是相关的路径。单击元素匹配CSS选择器a [href ^ =“http”]

Tags

Create a new tag

• Tag Type: Event

标签类型:活动

• Category: Link Clicked

类别:链接点击

• Action: Click Details

操作:单击详细信息

• Label: {{Click Element - Inner Text}}

标签:{{点击元素 - 内部文字}}

• Google Analytics Settings: best to use these for reusability and consistency rather than manually setting them up.

Google Analytics设置:最好将这些用于可重用性和一致性,而不是手动设置它们。

• Firing Triggers: The Link Clicking Trigger you created above.

触发触发:链接单击您在上面创建的触发器。