配信タグ（ab.js）の仕様

配信タグ ab.js とは、対象サイトに設置する AB Flows のクライアントサイド配信スクリプトです。実施中のテスト設定を取得し、訪問者をパターンに振り分け、DOM 変更やリダイレクトを適用し、表示とコンバージョンを計測します。サイズは約6KBで、依存ライブラリはありません。

設置方法

<script src="https://<AB Flowsのドメイン>/ab.js" data-project="<プロジェクトID>" async></script>

head 内のできるだけ上に設置すると、パターン適用までの時間が短くなり、ちらつきが減ります。同じページに複数回設置しても、2回目以降は実行されません。

実行の流れ

1. スクリプトタグの data-project からプロジェクト ID を読み取ります。
2. 訪問者 ID を localStorage から読み込みます。なければ生成して保存します。
3. 前回取得したテスト設定のキャッシュを確認し、現在の URL に一致するテストがある場合（または初回）だけ、アンチフリッカーとして body を非表示にします。
4. 設定 API GET /api/config/<プロジェクトID> から実施中のテスト一覧を取得します。
5. 現在の URL に一致するテストごとに、パターンを決定して適用します。
6. 表示（インプレッション）を計測 API POST /api/collect に送信し、ゴールの監視を開始します。
7. 適用が終わったら body の非表示を解除します。

振り分けロジック

振り分けは決定論的で、同じ訪問者は再訪時も必ず同じパターンを見ます。

• 訪問者 ID とテスト ID を組み合わせた文字列のハッシュ値（FNV-1a）を 0 以上 1 未満の数値に変換します。
• 配信割合（traffic）: ハッシュ値 × 100 がテストの配信割合以上なら、その訪問者はテスト対象外です。対象外の訪問者にはオリジナルがそのまま表示され、計測もされません。
• パターンの比重（weight）: 別のハッシュ値を各パターンの比重の合計に対する位置とみなし、該当するパターンを選びます。
• 一度割り当てたパターンは localStorage に保存し、以降はハッシュ計算をせずに同じパターンを返します。テスト開始後にパターンの比重を変えても、割り当て済みの訪問者は変わりません。

パターンの適用

対象要素が見つからない場合は、MutationObserver で DOM の変化を監視し、最大3秒間リトライします。SPA や遅延描画されるページでも適用できます。

アンチフリッカー

オリジナルの表示が一瞬見えてしまう「ちらつき」を抑えるため、配信タグは body の不透明度を 0 にしてから設定を取得し、パターン適用後に戻します。

• 非表示の上限は 1.2 秒です。設定取得が遅延しても、1.2 秒後には必ず表示されます。
• 前回取得した設定を localStorage にキャッシュし、現在の URL に一致するテストがないと分かっているページでは非表示にしません。テスト対象外のページの表示速度には影響しません。
• 設定の取得に失敗した場合も、すぐに表示に戻します。

計測

送信には navigator.sendBeacon を使い、対応していない環境では fetch の keepalive オプションを使います。送信先は配信タグと同じオリジンの /api/collect です。

プレビューモード

対象ページの URL に ?_ab_preview=<パターンID> を付けてアクセスすると、そのパターンだけを適用し、振り分けと計測を行いません。下書き中のテストも確認できます。画面左下に「AB Flows プレビュー中（計測されません）」のバッジが表示されます。

localStorage / sessionStorage のキー

localStorage が使えない環境（プライベートブラウジングなど）では、ページごとに訪問者 ID が変わるため計測の精度が下がりますが、表示は正常に行われます。

設定 API のレスポンス

GET /api/config/<プロジェクトID> は、そのプロジェクトで実施中（running）のテストだけを返します。

{
  "experiments": [
    {
      "id": "テストID",
      "type": "ab",
      "url_pattern": "https://example.com/lp",
      "url_match_type": "contains",
      "traffic": 100,
      "goal_type": "click",
      "goal_value": "#cta",
      "ga4_enabled": false,
      "variants": [
        { "id": "パターンID", "weight": 50, "redirect_url": "", "changes": [], "css": "", "js": "" }
      ]
    }
  ]
}

レスポンスは短時間キャッシュされます（ブラウザ 15 秒、CDN 30 秒、再検証中の配信 60 秒）。テストの開始・停止は概ね 1 分以内に反映されます。

関連ドキュメント

• 導入手順（タグ設置から最初のテストまで）
• ゴール（コンバージョン）の設定