API Reference
Start typing to search…

A/Bテストの組み込み

👍

チェックリスト

これまでに:

  • Javascriptのビーコンを埋め込み、データを収集されていることを確認しました。
  • リコメンデーションを受け取っていることをテストしました。
  • 正常なアイテムと、関連するフィールドが正常に返されていることを確認しました。

🚧

A/Bテストの方法

A/Bテストの実施においては、ユーザハッシュの使用を推奨します。その他のA/Bテストの仕組みを採用している場合は、我々がそのバケットの仕組みをレビューして、テスト結果の解釈にどのような影響を与えるか理解するために、LiftIgniterにお問い合わせください。**

これら2つのケースにおいて活用できる、注意事項を下記に示します:

  • **50％（またはその他の適切な割合）のユーザに対して、同じスタイルを維持したまま、既存のリコメンデーションをLiftIgniterのリコメンデーションに書き換える。
  • **50％（またはその他の適切な割合）のユーザに対して、新たにLiftIgniterのリコメンデーションを表示するリコメンデーションウィジェットを設置する。残りのユーザに対してはなにも表示しない（LiftIgniter導入前のユーザの状況を再現する）。

このページのサンプルコードは、A/Bテストに必要なコードだけではなく、LiftIgniterを導入するにあたって必要な機能（リコメンデーションをregisterまたはFetchする、リコメンデーションを表示する、リコメンデーションをトラックするなど）のひと通りのコードを網羅しています。それぞれの機能の詳細は、ドキュメントに個別で詳細を説明しています。

1. ユーザを分割する仕組み

A/Bテストの一般的なアプローチでは、ユーザごとに分けてテストを行います。これは最も確実な方法で、リコメンデーションを継続して見ることができるユーザと、リコメンデーションをまったく見ないユーザのアクティビティの傾向を比較することができます。

LiftIgniter SDKでは、スライスとコントロールスライスのユーザ分割に活用できる、ユーザハッシュの仕組みを提供しています。ユーザハッシュは32ビット長のハッシュを使用したユーザCookieです。それは、下記のとおりアクセスすることが可能です:

$p('userHash')

LiftIgniter SDKでは、ハッシュ値に対するmod 100の演算を行って取得した、個別のA/Bテストのスライスを提供しています。この方式では、0から99までの合計100個のbinを作ることができます。このスライスはSDKのcallback関数を使用してアクセスすることができます。

$p("abTestSlice", {callback:function(x){console.log(x);}})

A/Bテストの実施においては、ユーザハッシュの使用を強く推奨します。その他のA/Bテストの仕組みを採用している場合は、我々がそのバケットの仕組みをレビューして、テスト結果の解釈にどのような影響を与えるか理解するために、LiftIgniterにお問い合わせください。

📘

A/Bハッシュの強制使用

QAテストまたはリコメンデーションテストを行う際に、特定のハッシュ値を強制的に使用して、テストを簡単に行いたい場合は、URLのパラメータに、[igniter_abhash]（例: [&igniter_abhash=10]をブラウザのURL欄に追加することで、ハッシュ値を強制的に10にします）を追加してください。ハッシュ値が50未満の状態で[abTestSlice]のロジックを設定してリコメンデーションを表示する場合、0から49までの値を設定することでリコメンデーションを表示します。

3. LiftIgniterのリコメンデーション vs 既存のリコメンデーション（またはリコメンデーションがない状態）

下記の説明は、両方のケースを網羅しています:

  • 既存のリコメンデーションウィジェットを上書きする場合
  • 新たなリコメンデーションウィジェットにLiftIgniterのリコメンデーションを表示したい場合
<div id="li-recommendation-unit">
  <div class='recommended_item'>
    <a class='headline' href='//url-1'>Title 1</a>
  </div>

  <div class='recommended_item'>
    <a class='headline' href='//url-2'>Title 1</a>
  </div>

  <div class='recommended_item'>
    <a class='headline' href='//url-3'>Title 3</a>
  </div>

  <div class='recommended_item'>
    <a class='headline' href='//url-4'>Title 4</a>
  </div>
</div>

この領域でA/Bテストを実施したい場合: デフォルトで表示されているリコメンデーションと、LiftIgniterのリコメンデーションを比較する。

**1. 置き換えたいアイテムをタグで囲みます（例、class属性で[li-widget-item]にを追加する）:

<div id="li-recommendation-unit">
  <div class='recommended_item li-widget-item'>
    <a class='headline' href='//url-1'>Title 1</a>
  </div>

  <div class='recommended_item li-widget-item'>
    <a class='headline' href='//url-2'>Title 1</a>
  </div>

  <div class='recommended_item li-widget-item'>
    <a class='headline' href='//url-3'>Title 3</a>
  </div>

  <div class='recommended_item li-widget-item'>
    <a class='headline' href='//url-4'>Title 4</a>
  </div>
</div>

**2. タグで囲んた部分に対応したMustacheテンプレートを追加する:

📘

上書き vs 新しいウィジェットの表示

既存のウィジェットを上書きする場合は、下記のテンプレートが、Mustacheテンプレートの中の既存のウィジェットのHTMLのコピーになります。（新しいリコメンデーションを同じ見た目で表示させるため）

新しいウィジェットを表示する際は、求めているHTMLのデザインによってテンプレートを選定してください。一般的な表示位置の案については、Click-Through Rate (CTR)のガイドラインを参照してください。

<script type="application/mustache" id="recommended-item-template">
  <div class='recommended_item'>
    <a class='headline' href='{{url}}'>{{title}}</a>
  </div>
</script>

**3. リコメンデーションを表示するためのcallback関数を設定する

// 'li-widget-item'で囲まれたHTMLを上書きしてリコメンデーションを表示する。
var rendering_callback = function(resp) {
    var els = document.querySelectorAll('#li-recommendation-unit > div.li-widget-item');
    var template = document.querySelector('#recommended-item-template').innerHTML;
  
    for (var i = 0; i < els.length && i < resp.items.length; ++i) {
        // 基本的には、 Mustache.render(template, resp.items[i]); 
      	els[i].innerHTML = $p('render', template, resp.items[i]);
    }
}

**4. registerとトラッキングのロジックをすべてのスライスに挿入する

var trackAlgo = function(algorithm) {
  	$p('track', {
    // A/Bテスト中のリプレース用としてマークしています。
    	elements: document.querySelectorAll('#li-recommendation-unit > div.li-widget-item'),
    	name: 'default-widget',
    	source: algorithm,
    	_debug: true
  	});
}

var abTestHandler = function(slice) {
    // スライスはハッシュ値のmod 100です。
  	// スライスを0〜100に設定して、LIとbaseのスライスを個別で確認することができます。
    if (slice < 50) {
        // LiftIgniterのリコメンデーションをテストしているウィジェットを上書きするためのregisterをコールして、
        // 適切に指標をトラックします。
    		$p('register', {
        		max: 4,
          	widget: 'default-widget',
          	callback: function(resp) {
                // 読み込みのオーダーにおける問題に対応するために、jQueryの中にこのcallbackのコードをWRAPしてください。
              	// 上記のコードを参照してください
            		rendering_callback(resp);
            		// 'LI'のスライスとして上書きされた領域をトラックする。
            		trackAlgo('LI');
         		}
        });
    } else {
        // 読み込みの順番の問題に対応するために、jQueryの中にこのcallbackのコードをWRAPしてください。
        // 'base'としてマークされた領域またはオリジナルのスライスをトラックする。
        trackAlgo('base');
    }
    // すべてのregisterコールを実行します。
    $p('fetch');
}

// ユーザがどのスライスに存在するか判別します。
// $p('userHash') は、ユーザのCookie IDをランダムな32ビット長の整数にハッシュします。
// $p('abTestSlice') は、この数値に対するmod 100の絶対値を返します。
$p('abTestSlice', {
                 callback: abTestHandler
               }
);

❗️

読み込みの順番の問題

callbackが実行されても、上書きしようとしているリコメンデーションが読み込まれない場合は、LiftIgniterのリコメンデーションでそのリコメンデーションを置き換えることはできません。この問題は、jQueryの中にcallbackをWRAPすることで解決できます。詳しくは、読み込みの順番に関するドキュメントを参照してください。

📘

備考

1〜3で示した手順において使用する名前は、お客様のウィジェットのデザインで使用している名前によって変わります。4の手順では、[trackAlgo]関数で使用したクエリセレクタの名称が、それらの名前に合致する必要があります。abTestHandlerのコードは、汎用的なものです。

🚧

トラッキングの動作を確認する

"setting _debug"の値を"true"に設定して、可視（Visible）およびクリックのイベントに対するアラートの受信を確認することで、トラッキングの動作確認ができます。詳細はトラッキングのドキュメントを参照してください。

📘

ニーズに合わせて行う変更を行う

はじめに上記のコードを使用して、以降は個別のユースケースにあわせて変更していくことにも使用できます。例えば:

  • 独自のバケットの仕組みを採用したい場合は、それに応じてabTestHandlerの一行目（if条件）を変更してください。
  • スライスごとに特定の動作を追加して指定したい場合は、abTestHandlerのifブロック（LiftIgniterのスライス向け）およびその他のブロック（コントロールスライス向け）にその内容を含めてください。この場合の特定の動作の例としては、分析数値を確認する場合に、他の解析サービスに対するcallbackを行って、それぞれの数値を比較する場合などがあります。

A/Bテストの結果は、LiftIgniterのダッシュボードから確認できます。