[JS]Google Analyticsを使ったABテストが簡単に実装できるスクリプト -easyAB

Post on:2013年7月19日

sponsorsr

ランディングページやバナーなどで、クリックされるテキストはどっちだろう？カラーを変えるとクリック率があがる？など、どちらがより効果的か検証することができるABテストを簡単に実装できるjQuery（Zeptoにも対応）の超軽量（2KB）プラグインを紹介します。

easyAB
easyAB -GitHub

easyABのデモ
easyABの使い方

easyABのデモ

ABテストをページ上で、実際にどのように使うかのデモが2種類あります。

easyABのデモ

一つ目のデモは、ボタンのカラーでクリック率が変わるか検証します。

ボタンのカラーがレッド

これはデモなので、ボタンのカラーを変更するには下記のリンクからアクセスし、ページをリロードしてください。

easyABのデモ：ボタンのカラーを変更

ボタンのカラーがグリーン

二つ目のデモは、複数の要素を変えて検証します。

easyABのデモ：複数の要素を変更して検証

ボタンのカラーとテキストをそれぞれ入れ替えたものです。

テキストとカラーの組み合わせのパターン

Google Analyticsを使って、それぞれの効果を測定できます。

どれが一番クリックされたかのグラフ（イメージかな）

easyABの使い方

デモを例に実装方法を紹介します。
と、その前に基本の書式から。

基本書式

異なるバージョンのカラーやテキストはスクリプトで設定します。
下記の記述は「.my-button」のボタンのカラーをデフォルトはグリーンで、50%のユーザーにブルーで表示します。

$('.my-button').easyab({
  'slot': 5 // set the custom var on the slot 5
  'name': 'test-button',
  'default-value': 'green'
  'alternatives': [
    {
      // set an alternative
      'value': 'blue'
      'alternative': function($this) { $this.css('background-color', 'blue'); }
    }
  ],
});

では、デモごとの実装方法を紹介します。

Demo 1

Demo 1: JavaScript

ボタンのカラー2種類は、スクリプトでセットします。

$('#download-btn').easyab({
  'slot': 1,
  'name': 'download-button-color',
  'default-value': 'apple-green',
  'alternatives': [{
    'value': 'fire-red',
    'alternative': function($this) {
      $this.removeClass('btn-success').addClass('btn-danger');
    }
  }]
});

Demo 2

Demo 2: HTML

テキストを変更する箇所にclass（.book-adjective）を加え、ボタン要素のonclickなどにGoogle Analyticsを仕込みます。

<div class="well text-center">
  <p>
  Check out my
  <b><span class="book-adjective">awesome</span>
  book</b>!
  <em>Only $4.99</em>
  </p>
  <button class="btn btn-success btn-large"
          id="purchase-button"
          onclick="_gaq.push(&#91;'_trackEvent',
              'Purchase actions',
              'Purchase'&#93;);">
    Get it now!
  </button>
</div>

Demo 2: JavaScript

変更する箇所を指定し、変更するテキストを設定します。

  /* set an Analytics custom var on the slot 1 */
  $('.book-adjective').easyab({
    'slot': 1
    'name': 'gs-book-adjective',
    'alternatives': [{
      'alternative': 'award winning'
    }]
  });

  /* set an Analytics custom var on the slot 2 */
  $('#purchase-button').easyab({
    'slot': 2
    'name': 'gs-purchase-button',
    'alternatives': [{
      'alternative':
        function($this) {
          $this
            .removeClass('btn-success')
            .addClass('btn-primary');
        }
    }]
  });