A/Bテストの実装 / RailsのシングルページアプリでOptimizelyを使う

Optimizely 便利ですね。

A/Bテストがものすごく簡単に実装できます。
普通のウェブサイトだと提供されているGUIでなんとかなるのですが、
Ajaxとか絡んでくるとちょっと工夫しないといけません。今回はそのメモです。

  
https://www.optimizely.com/
  
まずはアカウントを作って、新規テスト(Experiment)を作成。
Screen Shot 2015-12-24 at 9.50.27 PM
  
右側のOptionsメニューから Diagnostic Report を選ぶとスニペットが表示されるので、
それを自分のサイトに挿入します。
ページのフラッシングを防ぐため <head> タグ内の先頭が良いそうです。
  
もしすでに jQuery を使っているサイトの場合は、jQuery のすぐ後がよろしいかとと思います。
その場合は Home > Settings > Javascript に進んで、
Do not include jQuery in project code を選択しましょう。
でないと jQuery を二度読み込む気がします。たぶん。

Screen Shot 2015-12-24 at 9.56.39 PM
  
読み込めていると Diagnostic Report で下のような画面になります。
Screen Shot 2015-12-24 at 9.59.47 PM
  
これでひとまず準備完了。
例えばこのプロフィール表示しないほうが広告のクリック率上がるんじゃない?と思ったら、
Optimizelyのサイト上でさくっと消してしまえます。便利だね。
Screen Shot 2015-12-24 at 10.02.10 PM

で、消したバージョンが Variation#1 となり Original と比較されるというわけ。
元のコードをさわる必要がないので、効果がなかった時もテストを終了すればすぐ元に戻せます。

シングルページアプリケーションの場合

これで満足の場合も多いのだけれど、Twitter のように Ajax で記事をどんどん読み込む無限スクロールようなサイトの場合、ページの読み込み時にしかバリエーションが適応されません。なのでスクロールして読み込まれたコンテンツは今まで通り。これでは A/Bテスト になりません。

そういう場合は Ajax通信が完了した度にバリエーションを適応させることが必要。
ここでは Rails で開発してて Turbolinks も使用していると想定します。
  
Screen Shot 2015-12-24 at 10.14.50 PM
まず Options > Activation Mode を選択して Manual に設定。
そうすると window.optimizely.push(["activate", 000000000]); のコードがもらえるので、どっかにコピー。

例えば、ブログのようなアプリで、
posts#index に Ajax でアクセスした場合のみ発火させる場合。

Ajaxリクエストは posts#index かもしれないけど
トップページでも発火させたいので ready メソッドも書いています。

coffee
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.$(document).ajaxComplete( (event, xhr, settings) ->
  if settings.url.indexOf('/posts') > -1
    console.log "Optimizely when ajax."
    window.optimizely.push(["activate", 000000000])
)

ready = ->
  if location.pathname == '/'
    console.log "Optimizely when page loaded."
    window.optimizely.push(["activate", 000000000]);


$(document).ready(ready)
$(document).on('page:load', ready)

すべての ajaxComplete で発火させたければ当然 ifはいらいし、
URLが限定できるのであればハードコードでも良いかもね。ケースバイケースで。
  
こんな感じで Ajax を使ったアプリでもA/Bテストが簡単に実装できるかと。
以上です。
  

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた