A/Bテストの仕組み

kaizen platform はオリジナルのHTMLドキュメントに対して差分を適用することでA/Bテストを実現しています。
シングルページアプリケーションではページが読み込まれた直後にはまだDOMツリーがレンダリングされていません。レンダリングが終わってオリジナルのドキュメントが完成した後で、差分が適用されるように明示的にコードを記述する必要があります。
レンダリングが完了する前にテスト実行コードを呼び出すと kaizen Platform は差分を適用する部分を検出できず正しくA/Bテストを実施することができなくなります。

このドキュメントでは標準的なAngularJSアプリケーションでの Kaizen Platform 組み込み方法を説明します。

セットアップ

前提条件

Kaizen Platform は # をURLの一部として認識しないためhtml5Mode を利用している必要があります。

スクリプト

scriptタグに data-kz-single-page-app="true" 属性を追加してください。
デフォルトではDOMContentLoadedが発火するタイミングで自動的にA/Bテストが実行されますが、この属性を付けることでアプリケーションコードからA/Bテストを行うタイミングを明示的に記述することができるようになります。

<script data-kz-key="YOURSNIPPETID"
  data-kz-single-page-app="true"
  data-kz-namespace="kzs"
  src="//cdn.kaizenplatform.net/s/be/YOURSNIPPETID.js"></script>

URL変更の通知

Kaizen Platform はURLをテスト実行の判断基準の一つとして使っています。シングルページアプリケーション内でURLが変化したことを Kaizen Platform に通知するために $locationChangeSuccess イベントを利用して以下のコードを追加してください。

  $rootScope.$on('$locationChangeSuccess', function (ev) {
    if (window.kzs) {
      window.kzs('locationUpdated');
    }
  });

A/Bテストの実行

AngularJSではレンダリングが終わったことを通知する直接的なイベントは存在しませんが、他のイベントで代替することができます。
ここでは代表的なルーティングコンポーネントで利用するイベントとその組み込み方を説明します。

`ui-router`

ui-routerでは$viewContentLoadedを利用します。ui-view属性を複数の要素に付与している場合、一度のURL遷移で複数回の$viewContentLoadedが送られてきます。DOMツリーの外側から内側のui-viewを持つ要素の順でイベントが送られてくるので、最も内側のui-viewからイベントが送られてきたタイミングでA/Bテストを実行してください。

$rootScope.$on("$viewContentLoaded",function(ev){
  try {
    if (location.search.match(/\b_kz_preview_hash=/) || location.search.match(/\b_kz_editor_preview=/)) {
      // プレビュー用コード
      setTimeout(function () {
        // 現在のDOMをGUIエディタでオリジナルとして利用するように通知
        $rootScope.$emit('kzContentReady');
        // 既存のデザイン案をGUIエディタで開いている場合にそれを表示するように通知
        window.kzs('applyVariation');
      }, 2000);
    } else {
      // テストの実行
      setTimeout(function () {
        window.kzs('execute');
      }, 0)
    }
  } catch(e) { }
});

Kaizen Platform AngularJS インテグレーションガイド 2015.12