easyABのユニバーサルアナリティクスに対応した実装方法

Google Analyticsを使って、ABテストが簡単に出来るJQueryのプラグインがあります。

その名もeasyAB

http://romainstrock.com/easyAB/

オフィシャルサイトに書いてある記述だけでは足りない部分がありましたので補足の上、説明です。

実装方法

• jquery及びeasyab.jsをアップ
• ABテスト行いたい箇所にhtmlを記述（パターンA）
  • 旧GoogleAnalytics
    
    <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(['_trackEvent', 'Purchase actions', 'Purchase']);"> Get it now! </button> </div>

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    <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(['_trackEvent',               'Purchase actions',               'Purchase']);">     Get it now!   </button> </div>

  • ユニバーサルアナリティクス
    
    <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="ga('send', 'event', 'Purchase actions', 'Purchase');"> Get it now! </button> </div>

    1 2 3 4 5 6 7 8 9 10 11 12 13

    <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="ga('send', 'event', 'Purchase actions', 'Purchase');">     Get it now!   </button> </div>

• JSで変更箇所（パターンB）を記述
  
  /* 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'); } }] });

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

  /* 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');         }     }]   });

オフィシャルサイトに記述の通り、上記を記載すれば図のようにパターンの出し分けをすることは出来ます。

しかしながら、上記は文言とclassの出し分けを行っているだけでユニバーサルアナリティクスに送るイベントの判断をしていませんのでもう一手間が必要になります。

10行目に1行を追加しました。これがユニバーサルアナリティクスにプッシュするイベントをPurchaseからPurchase2に書き換える処理になります。