Google Analytics - 带重定向的出站链接跟踪

Posted

技术标签:

【中文标题】Google Analytics - 带重定向的出站链接跟踪【英文标题】:Google Analytics - Outbound link tracking with a redirect 【发布时间】:2018-09-29 09:56:46 【问题描述】:

我已设置 Google Analytics 来跟踪 outbound links。但是,我还安装了一个名为 Amazon Link Localizer 的 WordPress 插件,它修改了传出 URL,使其最终形式为 prourls.com?url=www.amazon.com 而不是 www.amazon.com

是否可以修改 Analytics 脚本以使这些出站链接点击仍可被跟踪?

【问题讨论】:

【参考方案1】:

第 1 步:将 trackOutboundLink 脚本添加到您的网站。

在页面 html<head></head> 部分添加此代码:(完整的脚本在此页面的底部,但使用这个来帮助最小化页面大小)

<script>
var trackOutboundLink=function(t,e)var n,o="object"==typeof t?t.href:t,a=document.createElement("a");function c()document.location=oe=e||o,a.href=e,/\bprourls\.com?$/i.test(a.host)?e=(n=/[\?&]url=([^&#]+)/.test(a.search)&&RegExp.$1||"")?decodeURIComponent(n):e:/\blinksynergy\.com$/i.test(a.host)&&(e=(n=/[\?&]murl=([^&#]+)/.test(a.search)&&RegExp.$1||"")?decodeURIComponent(n):e),"function"==typeof gtag?gtag("event","click",event_category:"outbound",event_label:e,transport_type:"beacon",event_callback:c):ga("send","event","outbound","click",e,transport:"beacon",hitCallback:c);window.addEventListener("load",function()var t,e,n=document.getElementsByTagName("a")||[];function o(t)t.preventDefault();var e=this.getAttribute("data-outbound-link");trackOutboundLink(this.href,"1"===e?"":e)for(t=0;t<n.length;t++)(e=n[t]).href&&!/^#/.test(e.href)&&location.host!==e.host&&""!==e.getAttribute("data-outbound-link")&&e.addEventListener("click",o,!1),!1);
</script>

请注意,该脚本是 Google Analytics 提供的脚本的修改/定制版本:

https://support.google.com/analytics/answer/1136920?hl=en — 用于旧的 analytics.js(或 ga.js)库。

https://support.google.com/analytics/answer/7478520?hl=en — 用于新的 gtag.js 库。

第 2 步:将 data-outbound-link="1" 添加到出站链接的 HTML。

对于您要跟踪的每个出站链接,将其添加到链接的 HTML:

data-outbound-link="1"

(如果您之前在链接的 HTML 中添加了onclick="trackOutboundLink('http://www.example.com'); return false;",请用上面的代码替换它。)

所以而不是:&lt;a href="http://www.example.com" onclick="trackOutboundLink('http://www.example.com'); return false;"&gt;Check out example.com&lt;/a&gt;

..使用这个:&lt;a href="http://www.example.com" data-outbound-link="1"&gt;Check out example.com&lt;/a&gt;

完整的脚本

以下是 custom trackOutboundLink 脚本的完整、未缩小版本:(仅供参考)

<script>
var trackOutboundLink = function(link, url2track) 
  var url2visit = ('object' === typeof link) ? link.href : link,
    a = document.createElement('a'),
    b;

  url2track = url2track || url2visit;
  a.href = url2track;

  // Dynamic redirect URLs via Prourls.com; this was for Amazon URLs.
  if (/\bprourls\.com?$/i.test(a.host)) 
    b = (/[\?&]url=([^&#]+)/.test(a.search) && RegExp.$1) || '';
    url2track = b ? decodeURIComponent(b) : url2track;
  // Dynamic redirect URLs via Link Synergy; this was for Footlocker URLs.
   else if (/\blinksynergy\.com$/i.test(a.host)) 
    b = (/[\?&]murl=([^&#]+)/.test(a.search) && RegExp.$1) || '';
    url2track = b ? decodeURIComponent(b) : url2track;
  
  // All other URLs are not parsed and expected to be valid outbound URLs.

  function onTracked() 
    //alert('Tracked: ' + url2track);
    document.location = url2visit;
  

  if ('function' === typeof gtag) 
    gtag('event', 'click', 
      'event_category': 'outbound',
      'event_label': url2track,
      'transport_type': 'beacon',
      'event_callback': onTracked
    );
   else 
    ga('send', 'event', 'outbound', 'click', url2track, 
      'transport': 'beacon',
      'hitCallback': onTracked
    );
  
;

window.addEventListener('load', function() 
  var links = document.getElementsByTagName('a') || [],
    i, a;

  function _go(e) 
    e.preventDefault();

    // Track a custom URL address, if specified.
    var b = this.getAttribute('data-outbound-link');

    trackOutboundLink(this.href, '1' === b ? '' : b);
  

  for (i = 0; i < links.length; i++) 
    a = links[i];

    if (!a.href || /^#/.test(a.href) || location.host === a.host) 
      continue;
    

    if ('' !== a.getAttribute('data-outbound-link')) 
      a.addEventListener('click', _go, false);
    
  
, false);
</script>

【讨论】:

首先尝试使用包含的点击处理程序,或者不删除现有的点击处理程序。 我们可以检测右键单击(如果不是大多数浏览器,也可以禁用右键单击)或显示上下文/右键单击菜单的操作,但用户是否选择在新标签(或窗口)与否;这是我认为我们可以检测到的东西。但是,如果您想跟踪链接 上右键单击它,那么我们可以做到。我的意思是,我们可以在例如“右键单击”类别而不是“单击”类别下对其进行跟踪。让我知道你的想法。如果这条信息没有帮助,我们深表歉意…… 感谢 Sally 的详细解释。事实证明,实际上存在一个更大的问题,即非亚马逊链接仅被跟踪大约 20% 的时间。我不知道发生了什么。这是一个非常令人沮丧的问题。 我使用 GA 实时跟踪链接点击,可以看到亚马逊链接点击 100% 的时间,但只有大约 20% 的时间看到其他链接点击。我确信要解决这个问题需要亲自动手。感谢您提供的所有帮助! 我希望我能进一步帮助你,但除了技术/编码方面,我的 GA 技能相当“一般”,所以我祝你一切顺利,并希望能解决问题.干杯!【参考方案2】:

试试这个:

首先,删除所有链接上的onclick 处理程序。

第二在您的&lt;head&gt; 块中包含以下代码

var trackOutboundLink = function(url) 
    var newUrl = url;
    var re = /prourls\.co.*\?.*url=(.*)/
    var matches = url.match(re);
    if (matches && matches.length > 0) 
        newUrl = matches[1]
    

    // console.log(newUrl);

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

var btns = document.querySelectorAll('a.btn');
for (var i = 0, l = btns.length; i < l; i++) 
    btns[i].addEventListener('click', function(e) 
        // console.log(e.target.href);
        trackOutboundLink(e.target.href);
    );

现在修改trackOutboundLink()

检查它是否为prourls.com?url=XXXX 形式 提取url参数的值 将该值传递给 GA 事件跟踪调用

【讨论】:

我已经添加了代码,但它似乎不起作用。如果您想自己检查设置,请查看下一页上的“检查价格(亚马逊)”链接 - ballershoesdb.com/shoes/adidas-crazy-explosive-2017 您网站上的网址与您在问题中概述的不同。我已经修改了代码中的正则表达式 - 请再试一次,让我知道你的进展情况 很抱歉给您带来了困惑。我更新了代码,但单击链接时仍然没有在 Analytics 中看到相应的事件。我知道它总体上可以正常工作,因为我可以看到对归类为事件的其他链接的点击。 请查看我上面的附加信息 它似乎仍然无法正常工作。正在跟踪 Footlocker 和 eBay 链接,但与亚马逊无关(屏幕截图 - evernote.com/l/Adw8uB6rMgtKiqHeUXrZVSLhkxNNRDv2LCo)。如果您想查看网站后端,请通过电子邮件发送网站页脚中的地址,我可以提供必要的信息。

以上是关于Google Analytics - 带重定向的出站链接跟踪的主要内容,如果未能解决你的问题,请参考以下文章

带重定向的远程sudo

带重定向的广告网络卷曲

如何使用 PHP 在重定向页面上使用 Google Analytics 进行跟踪?

实施 HTTP 到 HTTPS 重定向,保留 Google Analytics(分析)引荐来源网址

带重定向的chilkat ActiveX HTTP组件的问题

网站重定向(基于访问者的地理 IP)而不影响 Google Analytics 或爬虫