target=_blank在GA的外链跟踪中无法正常工作

Question

我希望能够跟踪外部链接的点击，并实施以下代码：

Google Analytics 代码

var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}

链接

<a class="postLinks" href="<?php if (get_field('source_link')) echo get_field('source_link'); ?>" onclick="trackOutboundLink('<?php if (get_field("source_link")) echo get_field("source_link"); ?>'); return false;"><?php the_title(); ?></a>

target=_blank

我通过jQuery根据访问者是否选择复选框（然后将选择存储在cookie中）来添加target=_blank 属性。但是，如果我选择在新窗口中打开外部链接，则不起作用。当选择复选框时，它确实正确地向链接添加了目标属性，但是当我单击链接时，它会在同一窗口中打开它。

带有目标属性的链接

<a class="postLinks" href="<?php if (get_field('source_link')) echo get_field('source_link'); ?>" onclick="trackOutboundLink('<?php if (get_field("source_link")) echo get_field("source_link"); ?>'); return false;" target="_blank"><?php the_title(); ?></a>

有什么想法吗？

- Charles Ingalls

Answer 1

如果你通过更改document.location来改变页面的URL，那么在链接上使用target ="_blank"将不起作用。

但是，仅当您跟踪内部链接时才需要使用hitCallback。如果您有一个外部链接，因此target="_blank"，则您的原始选项卡保持打开状态，并且ga跟踪事件将像常规事件一样完成 - 您无需担心确保在加载新页面之前它已经完成。

所以我认为你想要更改click处理程序如下：

var trackOutboundLink = function(url, isExternal) {
    var params = {};

    if (!isExternal) {
        params.hitCallback = function () {
            document.location = url;
        }
    }
    ga('send', 'event', 'outbound', 'click', url, params);

    return isExternal;
}

当您将此附加为单击处理程序时

onclick="return trackOutboundLink(urlGoesHere, isExternalGoesHere)"

更多具体的例子：

<a href="/" onclick="return trackOutboundLink('/', false)">An internal link</a>
<a href="http://www.example.com/" onclick="return trackOutboundLink('http://www.example.com', true)">An external link</a>

- alexp

---

谢谢Alex！我唯一想知道的是：链接将始终是外部链接。但是，有时它将在新标签页中打开，而其他时候它将在同一标签页中打开（由用户选择）。我需要将“url”和“isExternal”传递给trackOutboundLink()函数吗？ - Charles Ingalls

我原本想让isExternal成为一个布尔值，用于确定链接是否在新窗口中打开。你应该像设置URL一样从PHP中设置它。具体实现取决于您用于确定外部与内部链接的标准。 - alexp

'hitCallback': function() { if (target.attr('target') !== '_blank') { window.location.href = url; } } - albertpeiro

Answer 2

我只想支持温尼伯某人的回答。评论无法发表，但他的解决方案有效！

谷歌提供的代码（无法在新标签页中打开链接）是：

var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = url;}
 });
}

:

<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;">Check out example.com</a>

然而，如果你将"document.location = url;"改为"document.location = href;"，并将链接标签中的"return false;"改为"return true;"并添加"target="_blank""，则链接将在新标签页中打开，并跟踪外部链接。

因此，正确的代码应该是：

var trackOutboundLink = function(url) {
  ga('send', 'event', 'outbound', 'click', url, {
    'transport': 'beacon',
    'hitCallback': function(){document.location = href;}
 });
}

:

<a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return true;" target="_blank;">Check out example.com</a>

- Ted Converse

---

我认为hitCallback的整个意义就是在新窗口中打开接收到的链接。因此，如果你同时使用return true，那就更像是一个多余的步骤。而使用return false的作用是取消导航，这样go()函数就可以完成它。 - Don Dilanga

这个程序完美运行，但是我总是在控制台中收到一个“未捕获的引用错误：href未定义于hitCallback”的错误。 - Drowned

发生错误：“Uncaught ReferenceError: href未定义，位于hitCallback处”。 - Carlos G.

Answer 3

这将使所有链接在新窗口中打开：

    var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){window.open(url);}
   });
}

我刚刚将代码document.location = url;更改为window.open(url);，该代码来自https://support.google.com/analytics/answer/1136920

你还可以更改函数名称，并分别为新窗口链接和相同窗口链接创建一个函数。这将更改第一行的内容，例如：

var trackOutboundNewWindow = function(url) {

然后链接就会是这样

<a href="http://www.example.com" onclick="trackOutboundNewWindow('http://www.example.com'); return false;">Check out example.com</a>

- Jon

Answer 4

发现了一个解决方案（截至2016年2月6日）。

<script>
var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {
     'transport': 'beacon',
     'hitCallback': function(){document.location = href;}
   });
}
</script>

然后让你的链接看起来像这样...

<a href="http://www.example.com" onclick="trackOutboundLink('label name'); return true;" target="_blank">text</a>

- Some Guy in Winnipeg

---

你可能会错过很多事件 http://caniuse.com/#feat=beacon - Greg Bell

Answer 5

DRY - 用 'tracked' 类跟踪所有锚点。请注意，此代码对弹出式阻止程序敏感。 window.open 调用需要在 ga 调用之外。

/**
* Function that tracks a click on an outbound link in Analytics.
*/
$(function() {
    //only create event tracking if ga has loaded
    ga(function(){
        $("a.tracked").click(function(e) {
            var url = $(this).attr("href");
            var newWindow = ($(this)[0].target || '').toLowerCase() === '_blank';
            if(newWindow) {
                window.open(url, '_blank');
            }
            ga("send", "event", "outbound", "click", url, {
                "hitCallback": function () {
                    if(!newWindow) document.location = url;
                }
            });
            e.preventDefault();
        });
    });
});

- jenson-button-event

Answer 6

这个有效：

hitCallback': function(){window.open(url);}

希望事件跟踪不会受到任何影响。

- Vincent P.