easyAB.jsを使ってGoogleアナリティクスでABテストする実装方法

easyAB.jsを使ってGoogleアナリティクスでA/Bテストを行う方法です。ネットで見つかる情報では実装できなかったので、修正して実装できたのでまとめます。

今回実装できるABテストの内容は、ボタンラベルのテキスト文言の変更、もしくはCSS切り替えでのスタイル変更です。

会員登録ボタンなどで「会員登録」と「無料登録」のどちらの文言の方がクリックされるのかをABテストする場合と、ボタンの色は青がいいのか赤がいいのかなどをABテストする場合の２パターンできます。設置後はGoogleアナリティクスでクリック数を比較できます。

すごく簡単に設置できて、簡単にCV向上させやすいテストなのですごくおすすめです。

サンプルデモ

https://tuono034s.com/demo/easyAB/easyAB_sample.html#!dev

easyAB.jsとは

簡単にGoogleアナリティクスへイベントトラッキングしてABテストできる、jQueryのプラグインです。なので設置には別途、jQueryが必要です。

必要なファイルは以下URLの『Download easyAB』より
http://romainstrock.com/easyAB/

easyAB.jsの設置方法

jsファイルの読み込み

jQueryとeasyABよりダウンロードしたeasyab.min.jsをヘッダで読み込みます。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easyab.min.js" type="text/javascript"></script>

ABテストしたいボタンラベル箇所にトラッキングコード記述例

easyABのサイトのサンプルコードのままではアナリティクスへのイベントトラッキングできないので、トラッキングコードを挿入します。
※easyABのサイトのサンプルコードではbuttonタグで書かれていますが、aタグに変更しています。そのほか不要なタグを消してシンプルに変更しています。

旧アナリティクスコードの場合

<a href="ここにリンク先URL" class="btn-success"
  id="purchase-button"
    onclick="_gaq.push(['_trackEvent',
      'Purchase actions',
      'Purchase']);">ここにボタンラベルAパターン
</a>

ユニバーサルアナリティクスコードの場合

<a href="ここにリンク先URL" class="btn-success"
  id="purchase-button"
    onclick="ga('send', 'event', 'Purchase actions', 'PurchaseA');">ここにボタンラベルAパターン
</a>

テストBパターンの場合のテキスト変更jsの記述

テキスト変更時（Bパターン）の記述内容です。以下のスクリプトをページ内に記載します。私はヘッダに記載しました。外部ファイル化しても大丈夫です。
※easyABのサイトのサンプルコードではアナリティクスへトラッキングできていないのでコードを修正しています。ページ内で複数箇所にABテスト設置したい場合は’slot’の数字を変更して追記します。

ボタンラベルのテキスト変更する場合

<script type="text/javascript">
jQuery(function($){
/* set an Analytics custom var on the slot 1 */
$('#purchase-button').easyab({
  'slot': 1,
  'name': 'gs-book-adjective',
    'alternatives': [{
      'alternative':
      function($this) {
        $this
          .attr("onclick", "ga('send', 'event', 'Purchase actions', 'PurchaseB');")
          .text("ここにBパターンのテキストを記述");
      }
    }]
});

/* set an Analytics custom var on the slot 2 */
/* 複数設置したい場合は追記↓ */

});
</script>

ボタンのスタイル変更する場合

<script type="text/javascript">
jQuery(function($){
/* set an Analytics custom var on the slot 1 */
$('#purchase-button').easyab({
  'slot': 1,
  'name': 'gs-book-adjective',
    'alternatives': [{
      'alternative':
      function($this) {
        $this
          .removeClass('btn-success')
          .addClass('btn-primary')
          .attr("onclick", "ga('send', 'event', 'Purchase actions', 'PurchaseB');");
      }
    }]
});

/* set an Analytics custom var on the slot 2 */
/* 複数設置したい場合は追記↓ */

});
</script>

classが変更します。
以上で設置完了です。

動作確認方法

無事に設置できているかの確認方法は、設置したページのURLの末尾に「#!dev」を追加してページリロードすると、50％の確率でランダム表示されます。
このページを例にすると、

easyAB.jsを使ってGoogleアナリティクスでABテストする実装方法

でアクセスすれば確認できます。何回かリロードして変化しない場合はどこかに間違いがあります。

Googleアナリティクスでの確認方法

Googleアナリティクスの「行動＞イベント」で確認できます。「行動＞イベント＞サマリー」の「イベントカテゴリ」に”Purchase actions”と表示されています。「イベントアクション」ではAパターンが”PurchaseA”、Bパターンが”PurchaseB”と表示されます。

↑３日間テストした結果、１、２がスマホ版でのAB差、３、４がPC版でのAB差
このケースはわかりやすく差がでました。

Googleアナリティクスでイベント計測してカウント数が少なかった場合はこちらの記事もチェックしてください。
⇒GoogleアナリティクスのイベントトラッキングはonclickよりonMouseDownとonTouchStartで計測

Googleタグマネージャでカウントする方法
⇒タグマネージャでアナリティクスのaタグのイベント取得方法