This post is Private. Only a writer or those who know its URL can access this post.

Article information
Show article in Markdown
Report article
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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) { }
});
ku0522a
I hate computers.
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした