複数のページにまたがってA/Bテストを実施する際、同一ユーザーに対して各ページでバラバラにならず、一貫した訴求・コンテンツを表示したい場合があります。
本記事では、KARTE Blocksで複数ページにまたがって一貫したA/Bテストを実施する方法例をユースケース別にご紹介します。

なお、3番目のケースで紹介する方法はどのケースでも活用できる汎用性がありますが、1と2のケースではもっと簡単に設定できる方法をご紹介しています。

ケース 具体例
1.ページ共通の要素をA/Bテストする場合 ・全ページのグローバルナビゲーションのメニュー内容をA/Bテストしたい
・全ての商品カテゴリーページ末尾にあるキャンペーンバナーをA/Bテストしたい
2.特定導線を経由する時に、遷移前後のページで一貫したA/Bテストをする場合 ・トップページのキャンペーンバナーをA/Bテストしつつ、遷移先のキャンペーンLPのファーストビューをバナーに合わせて変えたい
3.任意のページで表示されたパターンに合わせて、他ページで表示するパターンも連動させてA/Bテストする場合 ・トップページで「500円OFF」のバナーを表示したら、商品カテゴリーページや新規会員登録用ページでも「500円OFF」の訴求を行いたい

ページ共通の要素をA/Bテストする場合

「グローバルナビゲーション」や「共通カラム」などをA/Bテストしたい場合の設定方法です。

1) ページのURL条件をカスタマイズする

テストを実施したいページのURLが全て含まれるよう、ページ設定のURL条件をカスタマイズします。
例えば、全ページを一括して登録したい場合には、以下のように登録します。
参考: URLが異なるページ群を一括して登録する

カスタマイズ前 カスタマイズ後
exmaple.com」のトップページ(https://example.com/)のみが対象 ・オリジン > 「次に等しい」(完全一致) > 「https://example.com
・パス > 「次に等しい」(完全一致) > 「/
exmaple.com」の配下全てが対象 ・オリジン > 「次に等しい」(完全一致) > 「https://example.com
・パス > 「次を含む」(部分一致) > 「/

2) A/Bテスト用の配信条件を作成する

登録したページ設定内に、A/Bテスト用の配信条件を作成します。
参考: 複数パターンでA/Bテストをする

3) ページエディタからブロックを編集・保存し、テストパターンを作成する

作成した配信条件の各パターンについて、テストしたいブロックを編集・保存して配信します。

null

一部のページだけ、テストを行う共通要素のCSSセレクターが異なる場合

上記方法は、共通要素のCSSセレクターがテスト対象のページ間で共通であるという前提です。
もし、特定ページでのみ共通要素のCSSセレクターが異なる場合、オリジナルブロックと変更ブロックをそのページ用に分けて登録する必要があります。

ページ設定の「プレビュー用のURL」を変更
ページ設定の「プレビュー用のURL」を変更することで、ページエディタ等でプレビューされるページを変更できます。
この状態で該当の共通要素を編集・保存することで、新たにオリジナルブロック・変更ブロックが登録され、一緒にA/Bテストすることができます。
null

4) 効果を確認する

A/Bテストの結果は、配信条件一覧画面でパターンごと、およびブロックリスト画面でブロックごとに確認します。各ページで配信された結果が合算集計されます。

null

特定導線を経由する時に、遷移前後のページで一貫したA/Bテストをする場合

ここでは、擬似的に以下のようなケースを想定します。
トップページ(遷移元)のCTAボタンをA/Bテストしつつ、ボタンのパターンに合わせてフォームページ(遷移先)のバナーも連動してテストを実施します。

null

設定の流れは以下の通りです。

  1. 遷移元と遷移先のページをそれぞれ登録する
  2. 遷移元のページで遷移導線(CTAボタン)にA/Bテストを設定し、遷移先リンクに任意のクエリパラメータを設定する
  3. 2で設定したクエリパラメータを指定したBlocksのセグメントを作成する
  4. 遷移先のページで、2で設定したクエリパラメータが付与されている場合に、バナーを変更するよう設定

1) 遷移元と遷移先のページをそれぞれ登録する

遷移元、遷移先ページをそれぞれ登録します。

null

2) 遷移元のページでテストパターンを作成する

遷移元のページで、A/Bテスト用の配信条件を作成します。
テストパターンで、遷移導線(ここではCTAボタン)のブロックを編集し、遷移先リンクに任意のパラメータを
付与します。

テストパターンを複数設定したい場合、パラメータは別々の値にしてください。
例) 「?cta=patternA」、「?cta=patternB」

※ リンクを変更できない際、以下サポートサイトを参考にしてください。
バナーの遷移先リンクを変更できない

null

3) Blocksのセグメントを作成する

2で設定したクエリパラメータがURLに含まれるユーザーを識別するために、Blocksのセグメントを作成します。

「最新のセッション」 > 「閲覧」 > 「閲覧ページのクエリ文字列」 > 「最新の値」 > 「を含む(部分一致)」 > 2で設定したパラメータ

null

4) 遷移先のページで、ブロックの変更・配信を設定する

遷移先ページの設定内で、テストパターンごとに配信条件を新規作成します。

  • 配信パターンは1つ・100%で設定し、変更なしのパターンの配信率は0%にする
  • 対象の絞り込みで、3で設定したBlocksのセグメントを指定する
  • 上記をテストパターンごとに分けて作る(例: テストパターンが2つなら、2つの配信条件を作成)

配信条件を作成したら、ページエディタから各パターンで配信したいブロックを登録します。

null

5) 効果を確認する

A/Bテストのテストパターンごとの効果・比較は、「遷移元」のページの配信条件一覧画面で確認します。
null

ブロックごとの効果は、遷移元・遷移先のページそれぞれで確認できます。
null

任意のページで表示されたパターンに合わせて、他ページで表示するパターンも連動させてA/Bテストする場合

1や2のケースに比べて設定難易度や工数は上がるものの、以下のようなメリットがあります。

  • 異なるページの、異なる要素に対して、一貫したA/Bテストを実施できる
  • サイト内外からの流入経路や回遊パターンが無数に考えられる場合でも対応できる

ここでは、擬似的に以下のようなケースを想定します。
トップページとフォームページでそれぞれA/Bテストを実施しつつ、各パターンで表示する内容を連動させたいシーン(下図左)を考えます。
null

大まかな設定の流れは以下の通りです。

  1. どのパターンが表示されたかを識別するためのカスタムイベントを計測する
  2. 1で設定したカスタムイベントを判定条件に、パターンごとにInsightのセグメントを作成する
  3. パターン割り振り済みのユーザーに向けたブロック配信を設定する
  4. テストを実施する他のページにも設定する

1) どのパターンが表示されたかを識別するためのカスタムイベントを計測する

A/Bテストを実施したいページから、任意のページを選んで順に設定を進めていきます。
ここでは、「トップページ」で設定を進めます。

A/Bテストの配信条件を作成する

下図右で示す、配信条件3を作成します(優先度の調整は最後に行います)。
null

その際、「変更なしのパターン」の配信率は0%に設定し、変更パターンの配信率の合計が100%となるようにします。

null

各パターンを編集、カスタムイベント計測用のJavaScriptを合わせて記述する

各パターンを編集します。その際、どのパターンが表示されたかを識別できるよう、カスタムイベント計測用のJavaScriptを記述します。
参考: BlocksからKARTEにカスタムイベントを送信する

以下はサンプルコードです。 適宜修正してご利用ください。
window.onload = function() {
   krt('send', '任意のイベント名', {
        abtest_name: 'abtest_1', //-- 任意のテスト名
        pattern_name: 'original' //-- 任意のパターン名(パターンごとに変更)
    });
};

JavaScriptはブロックの「コード編集」画面から記述します。

null

上記設定を各パターンに設定します。
null

2) 表示したパターン別にInsightのセグメントを作成する

A/Bテストで、各パターンが表示されたユーザーをInsightのセグメントを設定して識別できるようにします。

カスタムイベントを設定する

1で設定した配信条件を公開すると、設定したカスタムイベントをイベント画面で確認できます。

または、イベント画面から直接カスタムイベントを登録することも可能です。
グローバルナビゲーション > 「その他の機能」 > 「Insight イベント」 > 「カスタムイベントを作成」 > 「カスタムタグ」 と進んで設定して下さい。

null

カスタムイベントを登録する際には、1で設定したスクリプト内に記述したイベント名、およびフィールド名(abtest_name, pattern_name)を使用します。
null

Insightのセグメントを作成する

登録した/計測したカスタムイベントを参照し、各パターンごとにInsightのセグメントを作成します。

null

3) パターン割り振り済みのユーザーに向けたブロック配信を設定する

下図右で示す、配信条件1と2を作成します。
null

変更パターンごとに配信条件を作成する

変更パターンごとに配信条件を新規作成します。
ここでは、オリジナルパターンとテストパターンの2つのため、配信条件は2つ作成します。

  • それぞれの配信条件では、2で作成したInsightのセグメントを配信対象として設定します。
  • 配信パターンの配信率は100%で設定(変更なしのパターンは0%)します。

null

配信条件の優先度は、配信条件1・配信条件2 > 配信条件3となるように設定します。

配信条件3の方が優先度が高いと、正しくA/Bテストの割り振りができなくなりますのでご注意ください。

null

ブロックの編集・配信

各配信条件・パターンに、それぞれ配信するブロックを登録・保存します。

  • 配信条件1と2では、すでにパターンが割り振られたユーザーにはその内容が100%で表示
  • 配信条件3では、パターンの割り振りがまだされていないユーザーに、パターンの割り振りと同時にブロックの出しわけを実施

null

4) テストを実施する他のページにも設定する

テストを実施したいページごとに、1)と3)を設定してします。
2)のカスタムイベントの登録・計測、およびInsightのセグメントの作成は不要です。
(※ 別のA/Bテストを実施したい場合は都度必要です)

5) 効果を確認する

A/Bテストのパターンごとの効果は、各ページで設定した配信条件③(A/Bテストパターンの割り振りを行うもの)の数値を個別で確認し、訪問UU数やゴールUU数を合算して確認します。

※ 同じゴール、効果集計期間で確認してください。
※ 手元での集計するため、CSVファイル等で効果数値をダウンロードしてください。
null