使用 Javascript 进行实时基本网络分析答案

【问题标题】：Real-time basic web analytics with Javascript使用 Javascript 进行实时基本网络分析
【发布时间】：2015-02-19 06:48:43
【问题描述】：

我需要开发一个内部实时分析解决方案（例如类似于 GA 或 mixpanel），它收集：

来自网站本身的信息 (URL)
来自用户浏览器的信息（语言、设备、操作系统等）
来自引用来源等的信息。

.. 并通过单像素图像请求将此数据发送到服务器。与 GA 和其他解决方案的工作方式类似：

Google Analytics 的工作原理是包含一段 JavaScript 代码 在您网站的页面上。当您网站的用户查看页面时，这 JavaScript 代码引用一个 JavaScript 文件，然后执行 Analytics 的跟踪操作。跟踪操作检索通过各种方式和发送有关页面请求的数据通过附加的参数列表向分析服务器提供信息到单像素图像请求。

我想知道是否有任何可用的开源项目可以完成这部分工作，我可以将其用作进一步构建的基础。有Piwik，但它的功能太丰富，对我的要求来说太重了。

编辑添加：我正在对数据做一些特定的事情，否则我只会使用现有的解决方案。

【问题讨论】：

您检查过 OWA 吗？ openwebanalytics.com
你为什么不使用 Piwik 或 OWA 的跟踪器，然后绕过后端并从数据库中提取数据来做你的事情（我认为它们都在 MySql 上运行？你会一个经过广泛测试的跟踪器，无需担心任何本土解决方案会干扰您网站上的其他脚本。
如果您需要可扩展但在云中运行的解决方案，还有 Snowplow (github.com/snowplow) - 不知道您是否想要/需要。
danml.com/js/blackbox.js 捕获的数据比 google 多得多，但将其发送到某个地方取决于您。不过，它的 JSON 输出应该都适合查询字符串。
所有你需要将它发送到服务器是类似new Image().src="/rec.php?data="+encodeURIComponent(JSON.stringify(blackbox)); 然后你可以使用类似 json_decode($_GET['data']);在php中获取数据。

标签： javascript google-analytics analytics

【解决方案1】：

试试

var img = new Image;
img.width = img.height = "1px";
var res = window.navigator;
var data = {};
var _plugins = {};
Array.prototype.slice.call(navigator.plugins).forEach(function(v, k) {
  _plugins[v.name.toLowerCase().replace(/\s/, "-")] = {
    "name": v.name,
    "description": v.description,
    "filename": v.filename
  }
});
delete res.plugins && delete res.mimeTypes;
data.url = window.location.href;
data.ref = document.referrer;
data.nav = res;
data._plugins = _plugins;
// set `img` `dataset` with `data` ,
// send `img` to server , decode `img` `dataset` at server
img.dataset.stats = JSON.stringify(data);

var img = new Image;
img.width = img.height = "1px";
var res = window.navigator;
var data = {};
var _plugins = {};
Array.prototype.slice.call(navigator.plugins).forEach(function(v, k) {
  _plugins[v.name.toLowerCase().replace(/\s/, "-")] = {
    "name": v.name,
    "description": v.description,
    "filename": v.filename
  }
});
delete res.plugins && delete res.mimeTypes;
data.url = window.location.href;
data.ref = document.referrer;
data.nav = res;
data._plugins = _plugins;
img.dataset.stats = JSON.stringify(data);
document.write(
  img.dataset.stats       
);

【讨论】：

嗯.. 我更喜欢经过广泛测试的解决方案，该解决方案可以跨浏览器工作并且已知稳定。
@3zzy 是的，element.dataset 可能并非所有浏览器都支持，例如 ie$.post(url, data) 而不是附加到元素的dataset 属性的data。如果需要使用 html 元素进行 data 存储/传输，可以创建 blob 的 div 或 span 元素具有 data 作为文本/html；将元素发送到服务器？虽然以纯文本形式发送可能最容易在服务器 $.post(url, JSON.stringify(data)) 上检索/处理？

【解决方案2】：

开源分析有 2 大解决方案。

您提到的 Piwik 是一个有据可查且非常成熟的解决方案。深入研究代码，Piwik 是如何让事情发生的，这将为您提供一些见解。

Open Web Analytics 是游戏中的另一个大玩家。一个更简化的工具，可帮助您了解如何进行基本跟踪。

根据您要跟踪的数据，我还建议您查看tutorial，它使用套接字来跟踪实时数据。

如果您想追踪用户的交互性，您还可以检查 Crazy Egg 的功能。

【讨论】：