【问题标题】:target=_blank doesn't work with GA outbound link trackingtarget=_blank 不适用于 GA 出站链接跟踪
【发布时间】:2015-01-12 08:44:48
【问题描述】:

我想跟踪出站链接的点击并实现了以下代码:

GA 代码

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 添加 target=_blank 属性,基于网站的访问者是否勾选复选框(然后选择存储在 cookie 中)。但是,如果我选择在新窗口中打开出站链接,它将不起作用。勾选复选框时,它确实将目标属性正确添加到链接中,但是当我单击链接时,它会在同一个窗口中打开它。

与目标属性的链接

<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>

有什么想法吗?

【问题讨论】:

    标签: javascript jquery google-analytics event-tracking outbound


    【解决方案1】:

    如果您通过 JavaScript 通过更改 document.location 来更改页面 URL,则在链接上添加 target="_blank" 不会做任何事情。

    但是,您只需要在跟踪内部链接时使用 hitCallback。如果您有外部链接,因此 target="_blank",您的原始选项卡将保持打开状态,并且 ga 跟踪事件将正常完成 - 您不必担心在加载新页面之前确保它完成。

    所以我认为您希望将点击处理程序更改为:

    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>
    

    【讨论】:

    • 谢谢亚历克斯!我唯一想知道的是:链接将始终是外部链接。但是,有时它会在新选项卡中打开,有时它会在同一选项卡中打开(由用户选择)。我是否需要将“url”和“isExternal”的相同 URL 传递给 trackOutboundLink() 函数?
    • 我的意思是 isExternal 是一个布尔值,用于判断链接是否在新窗口中打开。您应该从 PHP 设置它,就像从 PHP 设置 URL 一样。确切的实现将取决于您用于确定外部链接和内部链接的任何标准。
    • 'hitCallback': function() { if (target.attr('target') !== '_blank') { window.location.href = url; } }
    【解决方案2】:

    只想支持上面温尼伯的一些人的回答。不允许我发表评论,但他的解决方案有效!

    Google 建议的代码(不能在新标签中打开链接)是:

    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;” “返回真”;并添加“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>
    

    【讨论】:

    • 我认为 hitCallback 的重点是在新窗口中打开收到的链接。所以如果你同时使用 return true ,它更像是一个多余的步骤。什么 return false 取消导航,所以 go() 函数可以做到。
    • 这很好用,虽然我总是在控制台中收到“未捕获的 ReferenceError:href 未在 hitCallback 中定义”错误。
    • 发生错误“Uncaught ReferenceError: href is not defined at hitCallback”
    【解决方案3】:

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

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

    我只是将document.location = url; 代码从https://support.google.com/analytics/answer/1136920 更改为window.open(url);

    您也可以更改函数名称,一个用于新窗口链接,一个用于相同窗口链接。那就是将第一行更改为:

    var trackOutboundNewWindow = function(url) {
    

    然后链接将是

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

    【讨论】:

      【解决方案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>
      

      【讨论】:

      【解决方案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();
              });
          });
      });
      

      【讨论】:

        【解决方案6】:

        这行得通:

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

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

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多