当前位置：首页 > news >正文

【前端埋点】纯前端实现 A/B Test

news 2025/9/9 8:19:53

“纯前端实现 A/B Test”，意思就是 没有后端分流、也不依赖流量网关，那么只能靠前端逻辑来做“流量切分”。

🎯 目标

80% 的用户 → A 页面
20% 的用户 → B 页面
且要保证 同一个用户每次访问结果一致（否则用户刷新页面时 A/B 会跳来跳去，没意义）。

✅ 实现思路

方法一：基于随机数 + 本地存储（推荐）

function assignABTest() {// 先看本地是否已有分组结果let group = localStorage.getItem('ab_group')if (!group) {// 随机生成一个 [0,1) 的数const rand = Math.random()// 按比例分配group = rand < 0.8 ? 'A' : 'B'localStorage.setItem('ab_group', group)}return group
}// 使用
const group = assignABTest()
if (group === 'A') {window.location.href = '/pageA.html'
} else {window.location.href = '/pageB.html'
}

👉 特点：

第一次访问时随机分配。
后续访问保持一致（因为结果存了 localStorage）。
不需要后端，不需要流量标识。

方法二：基于用户特征（比如 UA / IP Hash）

如果你不想依赖 localStorage（例如用户清理缓存后可能变化），可以用一些用户环境特征来算哈希值：

function hashCode(str) {let hash = 0for (let i = 0; i < str.length; i++) {hash = (hash << 5) - hash + str.charCodeAt(i)hash |= 0}return Math.abs(hash)
}function assignABTestByUA() {const ua = navigator.userAgentconst hash = hashCode(ua)const ratio = hash % 100 // 映射到 0-99return ratio < 80 ? 'A' : 'B'
}

👉 特点：

同一设备 UA → 分组稳定。
但不同浏览器、换设备就会变组。

方法三：基于 Cookie（和 localStorage 类似）

function getCookie(name) {const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'))return match ? match[2] : null
}function setCookie(name, value, days) {const d = new Date()d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000)document.cookie = `${name}=${value};expires=${d.toUTCString()};path=/`
}function assignABTest() {let group = getCookie('ab_group')if (!group) {group = Math.random() < 0.8 ? 'A' : 'B'setCookie('ab_group', group, 30) // 保存30天}return group
}