大数据如何捕捉你的爱好？如何实现跨站用户行为分析？

watermelo37

发布于 2025-10-14 08:47:46

8600

代码可运行

运行总次数：0

代码可运行

作者：watermelo37 CSDN全栈领域优质创作者、万粉博主、华为云云享专家、阿里云专家博主、腾讯云“创作之星”特邀作者、支付宝合作作者，全平台博客昵称watermelo37。一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。 --------------------------------------------------------------------- 温柔地对待温柔的人，包容的三观就是最大的温柔。 ---------------------------------------------------------------------

大数据如何捕捉你的爱好？如何实现跨站用户行为分析？

你有没有过这样的经历：在你打开淘宝浏览器页面的同时，京东的推荐页可能已经“猜到”你最近在关注某类商品；你在知乎点过几篇健身文章，B站就开始给你推送相关的视频。仿佛网络在默默“跟踪”你的一举一动。很多人心里打鼓：难道我所有的爱好、习惯，甚至小秘密，都在大数据面前无处遁形？

今天我们就来聊聊：跨站用户行为分析是怎么实现的？

一、什么是“跨站”？

“跨站”指的是跨不同域名的数据关联。比如：

你在 a.com 买过运动鞋，又在 b.com 阅读体育资讯。

技术上通过追踪用户在多个网站上的行为，形成完整的用户画像，用于广告投放、个性化推荐。背后同一个广告系统能认出你是“爱打球的年轻人”，然后给你推篮球装备。但问题来了：浏览器默认禁止不同域名之间直接共享用户数据。要实现跨站追踪，工程师们就得“各显神通”。

二、常见的跨站追踪方案

1、总览

方案	是否依赖 Cookie	是否被现代浏览器限制
第三方 Cookie	✅	❌ 被逐步禁用
postMessage	❌	✅ 可用
重定向跟踪	❌	✅ 可用
指纹识别	❌	⚠️ 隐私审查严格
OAuth 登录	✅（第一方）	✅ 推荐方式

2、第三方 Cookie（传统方式）

工作原理：当你访问某网站时，它会在隐藏的广告 iframe 中偷偷加载 ad-tracker.com，这个广告域设置一个 Cookie，以后你访问任何网站，只要里面包含这个广告域，浏览器就会自动带上这个 Cookie。这样，广告商就能拼接出你的“跨站浏览轨迹”。

缺陷：1、Safari、Firefox 早就禁了。2、Chrome 也宣布 2025 年全面淘汰第三方 Cookie。3、在隐身模式下更是彻底失效。

注入第三方 Cookie 并记录页面访问：

// 第三方 JS 脚本
(function() {
  const userId = getOrCreateUserId(); // 在本地生成或读取用户 ID
  fetch('https://tracker.example.com/visit', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      userId,
      url: window.location.href,
      timestamp: Date.now()
    })
  });
})();

可以说，这招是“老黄历”了。已经不太适合现代跨站追踪。

3、跨域 iframe + postMessage

首先需要多个网站都嵌入同一个 iframe，比如 tracker.com/track.html。

各个网站把用户的行为数据发给 iframe，iframe 用 window.postMessage() 进行跨域通信,中央 tracker 汇总数据。这样不依赖 Cookie，可以绕过限制。

局限性就是双方要合作改代码，不像第三方 Cookie 那样“隐形”。

4、重定向跟踪（Redirect Tracking）/ URL 参数传递

实现链路：用户点击广告链接，实际路径是：siteA → tracker.com?from=siteA → siteB，在 tracker.com 这一跳里，已经记录下了“用户来自哪里，要去哪”。这样只靠服务器日志就能记录用户路径。

举个简单的例子，广告联盟（比如淘宝客、Google Ads）就是使用的这一招。你平时网购所使用的“返现链接”、“隐藏券渠道”、“外卖大额券领取”都是使用的这个原理。

// 页面 A
const userId = 'user_123';
window.location.href = `https://siteB.com/?uid=${userId}`;

// 页面 B
const params = new URLSearchParams(window.location.search);
const uid = params.get('uid');
console.log('来自站点A的用户ID', uid);

5、指纹识别（Fingerprinting）

收集用户设备的“独特信息”比如浏览器版本、屏幕分辨率、字体库、显卡型号、系统语言…然后拼在一起形成一串“独一无二”的指纹，这样即使没 Cookie，也能 90%+ 准确地识别出是同一个人。

简单 Canvas 指纹生成：

function generateFingerprint() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.textBaseline = 'top';
  ctx.font = '16px Arial';
  ctx.fillText('user_fingerprint', 2, 2);
  return canvas.toDataURL(); // 将渲染结果转为唯一字符串
}

const fingerprint = generateFingerprint();
console.log('用户指纹', fingerprint);

但是这样其实对用户的隐私侵犯得厉害，几乎是让用户完全暴露在被监控的情况下，争议较大，所以现代浏览器开始限制 API，比如屏蔽字体枚举、降低精度，理论上技术可行，但实际上可能会有法律风险。

6、OAuth 登录（联合登录）

这个很好理解，举个例子：你用“微信登录”某购物网站，又用“微信登录”某资讯网站，实际上，微信就是帮这两个网站建立了“同一用户”的映射。

这种方式本质上依赖第一方 Cookie（微信域下的），符合 OAuth 协议，安全、合法、用户知情，是目前最“合规”的跨站识别方式。缺点就是前提很多，跨域追踪有局限性。

假设我们用 GitHub 登录：

// 1. 跳转到 GitHub 授权页
const clientId = 'YOUR_CLIENT_ID';
const redirectUri = encodeURIComponent('https://your-site.com/oauth-callback');
const scope = 'read:user';

const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scope}`;

document.getElementById('loginBtn').addEventListener('click', () => {
  window.location.href = githubAuthUrl;
});

那么在需要登录的页面里就是：

// 2. oauth-callback 页面
// URL: https://your-site.com/oauth-callback?code=xxxx
const urlParams = new URLSearchParams(window.location.search);
const code = urlParams.get('code');

if (code) {
  // 3. 通常发送到后端换 token
  fetch('/api/github/oauth/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ code })
  })
  .then(res => res.json())
  .then(data => {
    console.log('用户信息或 token', data);
  });
}