Telemetry: 一种可以在别人网站也能收集访问记录的技术

背景

作为一个内容创作者来说,我们经常会把自己的一些文章,发布到一些第三方创作平台。但是对于内容有追求的人来说,发布仅仅只是开始,在后续很长的一段时间内我们都需要持续关注文章的阅读情况。而我们所有的数据收集只能借助平台自身的能力,这非常依赖于平台本身的能力。而且同一个内容我们往往会发到不同的平台,而这些阅读与访问数据是完全隔离的。

作为一个开发者,我会开发很多软件,但是当我把软件发布出去以后,再大部分情况下会完全脱离我的控制,比如我发布了一个命令行程序,我不知道用户的使用情况如何,我甚至不知道有多少用户使用了我的应用。或者我开发了一个开源应用,在过去,我只能通过github 的star功能知道我的应用被多少人喜欢,但是对于我的应用被多少人使用,使用情况如何则是完全不知道的。

因此,我们需要一个足够简单的,为了个人隐私或者其他的限制收集最少信息的解决方案。这个解决方案就是遥测技术.

Telemetry

遥测技术在计算机领域上是一种非常常见的技术,它往往选择最小的、匿名的信息上报,以适应各种个人隐私的需求。同时满足内容的创作者最低限度的分析需求。

比如React的Nextjs框架,就会通过Telemetry技术去收集信息 : API Reference: Next.js CLI | Next.js (nextjs.org)

又或者通过在文章中插入1px大小的空白透明像素图片,来实现在没有自己控制权的网站中收集用户的访问情况。现代浏览器和大部分的网站会阻止自定义脚本的插入,因为这往往会成为一种攻击。而相对而言一张图片则会显得非常无害。基本所有的网站都是允许第三方图片加载的。这也让Telemetry技术成为可能。

那么我们可以通过一张图片可以收集到什么信息呢?

事实上,仅仅接收一张图片的访问我们可以收集到的信息比你想象中的更多。

我们可以通过收集用户的网络请求,可以获得用户访问IP,访问时间,访问来源,访问设备。以此我们就可以分析用户的流量情况。比如文章的高峰与趋势,用户人群的分布,不同平台的流量粒度等等。这对于我们进行一些营销与宣传活动尤为重要。

所以我们要如何才能拥有Telemetry能力呢?

Telemetry其实是一种非常简单的技术,简单的来说只需要一个接口来接收来自互联网的请求即可。但是正因为简单所以几乎没有专门做这方面的工具存在。而对于大部分来说如果没有去做统计分析的意识的话很可能根本不会去关注这个。或者关注了也会因为基本的门槛而退却。但是这方面的需求又是确定的。

我们可以很简单的进行开发,只需要快速创建一个项目,创建一个路由,收集请求体中的信息,并返回空白图片即可。

以 nodejs 代码为例:

js 复制代码
router.get(
  '/telemetry.gif',
  async (req, res) => {
    const ip = req.ip;
    const referer = req.header['referer'];
    const userAgent = req.headers['user-agent'];
    
    // storage it in your database
    
    const blankGifBuffer = Buffer.from(
		  'R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
		  'base64'
		);
    res.header('Content-Type', 'image/gif').send(blankGifBuffer);
  }
);

如果你不想自己做,那我则会推荐可以直接使用 Tianji, Tianji 作为一款 Website Analytics + Uptime Monitor + Server Status 的开源项目, 最近推出了 Telemetry 功能,可以帮助内容创作者提供遥测上报的能力,帮助用户更好的收集各种内容。最重要的是他是开源的,意味着你可以自己控制你的数据,并整合多个平台的流量到一处,而无需碎片化的在不同的地方查看同样的东西。

Github: github.com/msgbyte/tia...

官网: tianji.msgbyte.com/

BTW: 本文就包含了这样的遥测上报功能。你能找到么?

相关推荐
llz_1126 分钟前
web-第二次课后作业
前端·后端·web
vipbic5 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
红尘散仙6 小时前
我把终端小说阅读器接上了 AI Agent:TRNovel 现在能用 skill 生成书源了
人工智能·后端·rust
ZC跨境爬虫7 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
小陈同学呦7 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
卷毛的技术笔记7 小时前
告别硬编码!Spring AI Alibaba 实现 AI Agent 智能工具调用(Tool Calling)
java·人工智能·后端·python·spring·ai编程
喵个咪7 小时前
GoWind Toolkit 前端代码生成|Vue3(ElementPlus/Vben)、React(AntDesign)全自动一键生成教程
前端·vue.js·react.js
会编程的土豆8 小时前
Go 语言反射(Reflection)详解
开发语言·后端·golang
喵个咪8 小时前
GoWind Toolkit Go后端代码生成 完整全流程实战
后端·go·orm
basketball6168 小时前
Go 语言从入门到进阶:4. 数组和MAP使用方法总结
开发语言·后端·golang