我们许多人使用 Google Analytics(GA)或类似的第三方服务来跟踪人们如何与我们的网站互动;告诉我们诸如人们何时访问以及点击了什么之类的事情。这些数据可以帮助我们做出重要的决策,例如何时安排维护或是否可以删除某个功能。
由于这些服务安装在多个网站上,因此这些第三方可以在人们在互联网上四处走动时收集大量有关他们的信息。并非所有人都对此感到满意。有些人已开始采取措施保护自己的隐私,例如安装像 Ghostery 这样的广告拦截器或在 Firefox 中启用 跟踪保护。
我认为这很棒!
有时这会破坏某些东西
当代码依赖于这些第三方服务且它们不存在时,就会出错。
我将使用跟踪外部链接作为示例,因为它是一个常见的用例,但我开始调查这个问题,因为我们不小心破坏了在选择不加载 GA 脚本的用户中 网站 的导航功能(对于某些极端情况,它不像听起来那样糟糕)。
我还要在此处的示例中使用通用分析跟踪代码(analytics.js),而不是经典的分析代码(ga.js),因此如果您在代码和您的代码之间发现了一些差异,这可能是原因。
出了什么问题?
Google 推荐的 跟踪出站链接 的当前方法(2016 年 1 月)如下所示
<a href="http://www.example.com"
onclick="trackOutboundLink('http://www.example.com'); return false;">
Check out example.com
</a>
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
Google 在这里推荐的是
- 在您的链接中添加
return false
,以便点击它们不会将用户带离页面 - 当用户点击链接时,将该点击添加到 GA 事件队列以进行跟踪,并告诉 GA 在完成后将用户带到新页面
- GA 处理事件
- GA 触发回调,将用户带到新页面
这保证了用户在他们的操作被记录之前不会离开网站。但是,如果 GA 无法处理事件……它永远不会触发回调,从而破坏了网站上的所有链接。:(
我们依靠 GA 将用户发送到新页面,但如果 GA 代码从未执行怎么办?
如何避免问题
如果您正在使用将 GA 添加到网站的当前推荐方法,那么您会在所有页面上包含以下内容
(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','//#/analytics.js','ga');
ga('create', 'UA-xxxxx-x', 'auto');
ga('send', 'pageview');
此代码段创建了一个全局 ga
对象。无论从 Google 成功加载其余脚本与否,ga
对象都可以在 JavaScript 中使用。
这意味着两件事
- 可以在 GA 加载之前将事件添加到队列中。(太棒了!这对跟踪非常快速发生的事件非常有用。)
- 我们不能通过检查
ga
对象的存在来检查 GA 是否已加载 就像我们以前那样,因为它始终存在。
那么我们如何知道 GA 是否已加载?好吧,聪明的人已经发现,当它初始化时,GA 会以几种不同的方式更改全局 ga
对象。这些更改都没有得到 Google 的正式记录,这意味着任何更改都可能在长期内失效。
在 使用 Google Analytics 跟踪出站链接 中,Andreas Veithen(Google 的员工,但在他的个人博客上撰文)建议最可靠的检查是查看 ga
对象是否仍然具有 q
数组。该数组在 GA 初始化并处理 ga.q
队列中等待的所有事件后被删除。由于 ga.q
是由我们在我们的网站上粘贴的代码段创建的,因此更改它将要求我们对我们的网站进行更改,因此对于 Google 来说将是一个重大变化。另一方面,Google 也可能更改其代码以不删除 ga.q
,因此我不确定这是否比其他任何方法更可靠。
在 Google Analytics、Ghostery 和事件跟踪 中,John Morton 建议检查 ga
对象上的 create
属性。这项技术已经存在最长时间,可能是使用最广泛的技术(我在快速非正式查看 GitHub 后这么说)。
在 hitCallback 函数未收到响应时的解决方法 (analytics.js) 中,Dom Sammut 观察到我们可以检查 ga
对象上的 loaded
属性。这是一种在 一些 Google 文档 中非正式使用的方法,因此它可能也比较可靠。我喜欢这个方法,因为它是显而易见的我们正在检查什么。
选择最后一种方法,我们将 Google 建议的代码更改为如下所示
var trackOutboundLink = function(url) {
// check if the GA object exists and that it has initialized
if(window.ga && ga.loaded) { {
// if yes, rely on GA to follow link
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
} else {
// if not, follow link ourselves
document.location = url;
}
}
在依赖任何第三方脚本之前进行这种检查是一个好习惯。您还应该 为来自您自己域以外的任何脚本(包括 CDN)包含一个本地备用。
尊重我们用户的隐私
大多数用户关心他们的隐私,我们可以采取更多措施来保护隐私。根据您工作的部门,您所在的国家/地区的法律或您公司的隐私政策也可能要求您对用户数据格外小心。
配置 Google Analytics 以保护隐私
如果 Google Analytics 是您选择的分析平台,那么您可以 采取一些措施来使其更私密。
其中一个简单易行的配置选项是请求匿名化用户 IP 地址。从本质上讲,Google Analytics 会在记录用户 IP 地址之前将其最后一个字节更改为 0。
这是通过在 ga('send', 'pageview');
之后将一个额外的行添加到您的跟踪代码段来触发的。
ga('set', 'anonymizeIp', true);
当然,Google 仍然会获取用户的 IP 地址(这是网络的工作方式),我们只是相信他们不会存储它。
尊重“请勿跟踪”(DNT)
还可以检测用户是否启用了“请勿跟踪”,并主动决定要加载哪些脚本。
Schalk Neethling 在 尊重用户选择 - 请勿跟踪 中记录了该过程。简而言之,我们使用一个检查来包装 GA 调用,以查看用户是否启用了 DNT,然后再执行包含文件的调用。
function _dntEnabled() {
// include the helper function from https://github.com/schalkneethling/dnt-helper/blob/master/js/dnt-helper.js
}
// Check the value of DNT before including GA
if (!_dntEnabled()) {
// include the Google Analytics snippet
}
这意味着 ga
对象不会添加到我们页面的全局作用域中,但没关系,上面的代码段也会优雅地处理这种情况。
您是否有其他技术/建议用于在尊重您网站访问者的在线隐私的同时使用分析服务?欢迎分享您的经验。
关于 Stephanie Hobson
Stephanie 从 1998 年开始为大大小小的网站编写代码。HTML、CSS 和 JavaScript 一直是她所热爱的,因此她对 Web 标准、渐进增强、性能、分析和可访问性的兴趣自然而然地扩展开来。她目前在 MDN Web 文档中担任前端开发人员。
6 则评论