ウェブマスターがウェブのことを書いたら

ウェブマスターとして働いている管理人がウェブで躓いたこと、ググったことを備忘録として書いています。主に技術的なこと、WEBサイト設計のこと

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

      2016/03/23

 - Googleアナリティクス, javascript

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

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

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

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

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%の確率でランダム表示されます。
このページを例にすると、
http://tuono034s.com/web-entry/1453/#!dev
でアクセスすれば確認できます。何回かリロードして変化しない場合はどこかに間違いがあります。

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

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

Screen Capture #20160322144415
↑3日間テストした結果、1、2がスマホ版でのAB差、3、4がPC版でのAB差
このケースはわかりやすく差がでました。

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

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

「この記事が参考になった」場合はクリックをお願いします。