@ab-test-sdk/sdk

A/B Test SDK —— 在你的 Vue 3 網站上重現實驗變更、追蹤成效。

採 Codemod-based 穩定身份系統：實驗以元素上的 data-ab id 定位，id 由 codemod 一次性寫進 source code、跨 build 不變，因此網站改版後實驗不會靜默失效（這正是傳統 CSS selector 方案的痛點）。

完整架構與設計說明見 專案 README。

安裝

pnpm add @ab-test-sdk/sdk

使用

import { init } from '@ab-test-sdk/sdk'

init({ apiKey: 'your-site-api-key' })

apiKey 是你在後台為該網站申請的識別碼。SDK 啟動後會：驗證網站 → 依目前路徑比對實驗 → 依權重分配 variant（localStorage sticky，同一使用者固定看同一版）→ 套用變更 → 追蹤事件（頁面停留 / 元素點擊）。

路由偵測用 History API hook（pushState / replaceState / popstate / hashchange），不綁定特定 router。

前置：元素要有 data-ab 才能被實驗定位

SDK 靠元素上的 data-ab id 來套用變更與追蹤——只要元素掛上 data-ab，就能對它做實驗。

手動加也行，但建議用伴隨的 CLI @ab-test-sdk/codemod 掃描 .vue 一次自動掛上：

pnpm add -D @ab-test-sdk/codemod
pnpm exec ab-codemod inject src

注入規則與限制見 codemod 說明。

限制

• 元素需先有 data-ab，未注入的元素無法被定位。
• 含動態文字（{{ }} / v-text）的元素會被標記 data-ab-text-locked，不可套用改文字的變更。
• 純前端 SDK：頁面載入時原始版本可能短暫閃現（anti-flicker 為本質限制）。
• 內含 @supabase/supabase-js，會增加最終 bundle 體積，請評估。

相關

• CLI：@ab-test-sdk/codemod
• 原始碼 / 架構：github.com/Hogan-K/A-B-Test