シングルページアプリケーション（SPA）で A/B テストを実施する方法

タグ :	A/Bテスト Optimizely X 非同期

▼こんな方に役立ちます。
・シングルページアプリケーション（SPA）で A/B テストを実施したい
・React、Vue、AngularJS などのフレームワークで構築された Web サイトで Optimizely を使用したい
・動的コンテンツの要素の変更や、履歴の変更をトリガーに実験を起動したい

Optimizely では、シングルページアプリケーション（SPA）を初めとする動的サイトでの実験をサポートしています。この記事では、動的 Web サイトで A/B テストを行う上でのポイントと Optimizely の設定手順をご紹介します。

シングルページアプリケーション（SPA）について

SPA で構築されたサイトの特徴は？

シングルページアプリケーション（SPA）は、React、Vue、AngularJS、Ember、Backbone などのフレームワークで構築され、ページ遷移せずに単一ページでコンテンツ（画面）が切り替える点を大きな特徴としています。代表的な事例には、Facebook や Google Map などがあります。

SPA の活用は拡大する？

リロードせずにコンテンツが切り替わるため、静的なコンテンツと比較して動作が機敏で、従来のブラウザの挙動に縛られずに、iOS や Android のネイティブアプリのような UI も実現できます。SPA のトラフィックは、2017年の Alexa の上位約18％を占めていましたが、今では既に約4分の1（24％）に達しているとも言われています。

SPA などの動的 Web サイトで実験を行う上でのポイント

適切なタイミングで実験を実行する

テストツールを活用した一般的な A/B テストでは、ページが読み込まれると同時に実験が開始されますが、以下のように、ページが読み込まれた後に特定の条件で実験を発動させたいケースがあります。特に、シングルページアプリケーション（SPA）では、セッションあたりに初回の1度しかページ全体が読み込まれないため、ページ読み込み後の任意のタイミングで実験を起動することが求められます。

ページが読み込まれた後に実験を発動するケース

ページのロードが完了した後に、動的に読み込まれるコンテンツで実験を行う
モーダルウインドウを立ち上げた時や、あるポイントまでスクロールした時など、訪問者が特定の操作を行うことを条件に、実験を発動させる
URLが変わらない SPA などのフレームワークで構築されたサイトで、フレームワークのイベント発火により実験を発動させる

Optimizely では、通常ページ読み込み直後に実験が起動しますが、Activation Mode を使用すると、任意のタイミングで実験を実行する事ができます。

Activation Mode については、以下記事をご参考ください。
https://optimizely.e-agency.co.jp/onlinehelp/conditional_activation_for_x/

URLやDOMの変更を検知して実験をアクティブ化する

SPA などの動的 Web サイトでは、テストしたい画面やコンテンツを URL で指定することが困難なケースが多くあります。そのため、実験開始のトリガーとする条件は、URL ではなく、特定のコンテンツ要素の存在、もしくは、ブラウザ内に保持されている履歴 URL を指定することになります。Optimizely では、コンテンツ（画面）の切り替え方法に応じて、従来の Activation Mode に加えた以下の2つの条件で実験を起動することができます。

URL の変更（ページ全体がリロードされなくても、URL が変更されるたびに実験を起動する）
DOM の変更（ページ内の要素が挿入、削除、または変更されるたびに実験を起動する）

URL や DOM の変更を検知して実験を非アクティブ化する

SPA などの動的 Web サイトでは、ページ全体はリロードされず、一部のコンテンツのみが切り替わることが多いため、実験バリエーションで加えた変更内容は、コンテンツが切り替わった後でも維持される可能性があります。

例えば、特定コンテンツのみサイト共通のヘッダー内にバナーを表示するなど、コンテンツが切り替わった後でも存在する要素に対して変更を加える場合は、ユーザーが実験対象のコンテンツから離れた際に、実験を非アクティブ化し、バリエーションの変更を元に戻す必要がないか検討する必要があります。

設定手順

Step1: 動的 Web サイトサポート機能を有効にする

まず、動的 Web サイトのサポートを有効にします。

該当プロジェクト > Setting > Dynamic Websites に移動。
「Enable Support for Dynamic Websites」にチェックを入れます。

Step2: 実験（Page）をアクティブ化する条件を設定する

次に、実験をアクティブ化する条件を設定します。デフォルトでは、「 Immediately （即時実行）」が選択されていますので、目的に沿ったトリガーを選択します。

Implementation > 「New Page」をクリックして、新規 Page 設定画面を表示します。
次に、実験（Page）をアクティブ化する条件を設定します。※詳しくは、以下の設定例をご参考ください。

ケースごとの設定例

ケース1：実験対象ページで URL が切り替わる場合
 ケース2：実験対象ページで URL が切り替わらない（ HTML 要素の有無を条件とする）場合

オプション設定例

ケース3：カスタムコード（ JavaScript ）を条件に実験を起動する
 ケース4：バリエーションに加えた変更を元に戻す
 ケース5：カスタムコードでバリエーションに加えた変更を元に戻す

ケースごとの設定例

ケース1：実験対象ページで URL が切り替わる場合

実験対象ページで URL が切り替わる場合、以下のように設定すると、ページがリロードされなくても URL が変更されるたびに設定した URL 条件と一致するかチェックされ、実験対象ページの URL 条件と一致した場合に実験が起動します。

Triggers：「 When the URL changes 」を選択
Conditions：「URL Match」を選択し、実験対象のページURL（例： sample.jp/target_pass/ ）を指定します。

ケース2：実験対象ページで URL が切り替わらない（HTML 要素の有無を条件とする）場合

実験対象ページで URL が切り替わらない場合は、実験対象ページにのみ存在する HTML要素があるかどうかをチェックし、HTML（DOM）が変更されるたびに、HTML要素をチェックし、存在した場合に実験を起動します。

Triggers：「 When the DOM changes 」を選択
Conditions：「 Element is present on page 」を選択し、存在するかどうかチェックする DOM 要素を CSS セレクタ（例： div.target_elements_class_1 ）で指定します。※複数ある場合はカンマ区切りで記述

オプション設定例

ケース3：カスタムコード（JavaScript）を条件に実験を起動する

設定したトリガーのタイミングで JavaScript を実行し、条件に一致した場合に実験を起動することができます。

JavaScript Condision サンプルコード：


function () {
  //Optimizely の utils オブジェクトを取得
  var $ = window.optimizely.get('jquery');

  var is_exist_target_element = false;
  //アクティブ化の条件とする要素の存在をチェック
  if ($('target_element').length > 0) {
    is_exist_target_element = true;
  }

  //条件判定した結果をブール値（True or False）で返す
  return is_exist_target_element;
}

ケース4：バリエーションに加えた変更を元に戻す

「 Advanced 」をクリックし、以下にチェックを入れると、実験（Page）をアクティブ化する条件に一致しなかった場合に、自動的に実験（Page）が非アクティブ化されます。

JS API を使用して、手動で非アクティブ化することもできます。

サンプルコード：


function trigger(activate, options) {
  //Optimizely の utils オブジェクトを取得
  var utils = window.optimizely.get('utils');

  if (window.location.href.indexOf(/* Some URL */) !== -1) {
    //ボタン要素の存在をチェック
    utils.waitForElement('button').then(function(buttonElement) {
      //ボタン要素のクリック時に非アクティブ化を実行
      buttonElement.addEventListener('click', function() {
        activate({isActive: false});
      });
    });
  }
}

実験（Page）が無効になったときに、バリエーションに加えた変更を元に戻す場合は、「 Undo changes when this Page deactivates 」にチェックを入れます。

ケース5：カスタムコードでバリエーションに加えた変更を元に戻す

Variation Code で加えた変更内容は、「 Undo changes when this Page deactivates 」のチェックをいれても元に戻すことはできませんので、以下例のように、実験（Page）の条件と一致しなかった場合に変更をリセットする実装が必要です。

JavaScript Condision サンプルコード：


function () {
  //Optimizely の utils オブジェクトを取得
  var $ = window.optimizely.get('jquery');
  //アクティブ化の条件とする要素の存在をチェック
  if ($('target_element').length == 0) {
    // バリエーションに加えた変更を元に戻す処理
  }

  //条件判定した結果をブール値（ True or False ）で返す
  return true;
}

このように、Optimizely では、シングルページアプリケーション（ SPA ）を初めとする動的サイトでの実験をサポートしています。この記事では、動的サイトで実験を行う上でのポイントと Optimizely の設定手順をご紹介しました。

Optimizely X ヘルプ