デザイン2案、文言3案どちらがいいかはユーザーに決めてもらうA/Bテストが簡単に実施できるスクリプト -ABalytics.js

バナー広告2案どちらがよいだろう？　サインアップのボタンの文言3案はどれが効果が高い？ などGoogle Analyticsを使ってコンバージョンレートを簡単に測定できるスクリプトを紹介します。

ABalytics.js -GitHub

• ABalytics.jsの特徴
• ABalytics.jsの使い方

ABalytics.jsの特徴

ABalytics.jsは他のスクリプトに依存せずに動作するJavaScriptで、クライアントサイドでコードを記述するだけで、Google Analyticsを使ったA/Bテストを簡単に実施できます。
サーバーサイドには何も設置する必要はありません。

• 設置が簡単！
• 作業はクライアントサイドだけです。
• サーバーサイドの準備は何も必要ありません。
• データは、Google Analyticsに保存されます。
• エレメントのclassを加えるだけで、複数のパターンをテストできます。
• 複数のパターンは同時に設定可能で、多数のテストを同時に行えます。

ABalytics.jsの使い方

Step 1: 外部ファイル

当スクリプト「abalytics.js」を外部ファイルとして記述します。

<script type="text/javascript" src="abalytics.js"></script>

Step 2: A/Bテストの定義

Google Analytics用にA/Bテストの定義を設定します。ここでは文言を2パターン用意し、どちらが効果があるか測定します。
1つ目が「variant1_name」、2つ目が「variant2_name」で、それぞれ設定した文言をランダムに表示します。

var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-XXXXXXXX-XX']);

      ABalytics.init({
              experiment1_name: [
                {
                  name: 'variant1_name',
                  "experiment1_class1_name": "<strong>Html content for variant 1 class 1</strong>",
                  "experiment1_class2_name": "Html content for variant 1 class 2"
                },
                {
                  name: 'variant2_name',
                  "experiment1_class1_name": "<strong>Html content for variant 2 class 1</strong>",
                  "experiment1_class2_name": "Html content for variant 2 class 2"
                }
              ],
              experiment2_name: [ ...
            }, _gaq);

      _gaq.push(['_trackPageview']);

Step 3: HTMLコンテンツへ適用

HTMLには要素のclassを使用して適用します。

<div class="experiment1_class1_name">
  This content will be replaced by ABalytics
</div>

<span class="experiment1_class2_name">This text will be replaced too</span>

Step 4: スクリプトの実行

テストの定義とコンテンツへの適用が完了したら、スクリプトを実行します。

<script type="text/javascript">
  window.onload = function() {
    ABalytics.applyHtml();
  };
</script>

もしjQueryを使用しているなら、呼び出しに「$(document).ready(...)」を使用したほうが良いでしょう。

Step 5: A/Bテストの実施

ここでは、そのページにユーザーが来訪するのを待つだけです。

Step 6: A/Bテストの結果を確認

A/Bテストの結果は、Google Analyticsで確認できます。
Google Analyticsでゴールの定義をすると、このスクリプトは非常によく機能します。ゴールの定義はGoogle Analyticsの「コンバージョン」から行ってください。

Google AnalyticsでのA/Bテストの結果