AB Flows の導入手順とは、アカウントを作成し、対象サイトに配信タグを1行設置し、最初のA/Bテストを作成して配信するまでの一連の流れです。所要時間の目安は、タグ設置を含めて15分程度です。プログラミングの知識は、タグをサイトに貼り付ける作業以外には必要ありません。
全体の流れ
- アカウントを作成する
- プロジェクト(対象サイト)を登録する
- 配信タグを対象サイトの
headに貼り付ける - テストを作成し、パターンとゴールを設定する
- プレビューで確認してテストを開始する
1. アカウントを作成する
無料でアカウントを作成 から、メールアドレスまたは Google アカウントで登録します。クレジットカードの登録は不要です。
2. プロジェクトを登録する
ログイン後のダッシュボードで「プロジェクトを作成」を選び、プロジェクト名と対象サイトのドメインを入力します。プロジェクトは対象サイト単位のまとまりで、1つのプロジェクトの中に複数のテストを作成できます。複数のサイトを扱う場合はサイトごとにプロジェクトを作成してください。
3. 配信タグを設置する
プロジェクト詳細画面に、次の形式の配信タグが表示されます。
<script src="https://<AB Flowsのドメイン>/ab.js" data-project="<プロジェクトID>" async></script>
このタグを、対象サイトのすべてのページの <head> 内、できるだけ上のほうに貼り付けます。テストを追加・変更するたびにタグを貼り直す必要はありません。
設置場所の目安
| サイトの種類 | 貼り付け方 |
|---|---|
| 静的HTML | 各ページの <head> 内に直接貼り付けます。共通ヘッダーのテンプレートがあればそこに1回貼ります。 |
| WordPress | テーマの header.php の <head> 内、またはヘッダーにスクリプトを挿入できるプラグインを使います。 |
| Google タグマネージャー | 「カスタムHTML」タグとして登録し、トリガーを「All Pages」にします。GTM経由は読み込みが遅れやすいため、ちらつき(フリッカー)を抑えたい場合は head への直接設置を推奨します。 |
| Next.js / React などの SPA | ルートのレイアウトの head に設置します。画面遷移後もDOM変更が適用できるよう、配信タグは要素が描画されるまで最大3秒間リトライします。 |
タグの設置には、対象サイトを編集する権限が必要です。サイトの管理者や制作会社に貼り付けを依頼してください。
4. テストを作成する
プロジェクト詳細画面の「テストを作成」から、次の項目を入力します。
| 項目 | 内容 |
|---|---|
| テスト名 | 管理用の名前です。例: 「トップページ メインビジュアル比較」 |
| 種類 | A/Bテスト(同じURLで要素を変更)または リダイレクトテスト(別URLへ振り分け) |
| 対象ページのURL | テストを適用するページのURLです。あとから部分一致・完全一致・正規表現の条件を調整できます。 |
作成後のテスト編集画面で、次を設定します。
- パターン: A/Bテストではビジュアルエディタで対象ページを開き、要素をクリックしてテキスト変更・非表示・削除を設定します。リダイレクトテストでは各パターンの遷移先URLを入力します。
- ゴール: ページ到達、クリック、カスタムイベント、GA4のいずれかを選びます。詳しくは ゴール(コンバージョン)の設定 を参照してください。
- 配信割合: テスト対象に含める訪問者の割合と、パターンごとの振り分け比重を設定します。
5. プレビューして開始する
「プレビュー」を使うと、計測や振り分けを行わずに各パターンの見た目を確認できます。プレビューは対象ページのURLに ?_ab_preview=<パターンID> を付けたもので、画面左下に「AB Flows プレビュー中」のバッジが表示されます。
確認できたら「テストを開始」を押します。配信タグは設定を短い間隔で取得しているため、開始から1分以内に対象サイトで配信が始まります。
テスト開始後にすること
- レポート画面で、パターンごとの訪問者数・コンバージョン数・コンバージョン率と「オリジナルを上回る確率」を確認します。読み方は レポートの読み方(ベイズ統計) を参照してください。
- 勝者候補が表示されたら、勝ったパターンの内容を対象サイト本体に反映し、テストを終了します。
- テストは一時停止と再開ができます。一時停止中は配信されません。