A/Bテストの実装 / RailsのシングルページアプリでOptimizelyを使う
Optimizely 便利ですね。
A/Bテストがものすごく簡単に実装できます。
普通のウェブサイトだと提供されているGUIでなんとかなるのですが、
Ajaxとか絡んでくるとちょっと工夫しないといけません。今回はそのメモです。
https://www.optimizely.com/
まずはアカウントを作って、新規テスト（Experiment）を作成。
右側のOptionsメニューから Diagnostic Report を選ぶとスニペットが表示されるので、
それを自分のサイトに挿入します。
ページのフラッシングを防ぐため <head> タグ内の先頭が良いそうです。
もしすでに jQuery を使っているサイトの場合は、jQuery のすぐ後がよろしいかとと思います。
その場合は Home > Settings > Javascript に進んで、
Do not include jQuery in project code を選択しましょう。
でないと jQuery を二度読み込む気がします。たぶん。
読み込めていると Diagnostic Report で下のような画面になります。
これでひとまず準備完了。
例えばこのプロフィール表示しないほうが広告のクリック率上がるんじゃない？と思ったら、
Optimizelyのサイト上でさくっと消してしまえます。便利だね。
で、消したバージョンが Variation#1 となり Original と比較されるというわけ。
元のコードをさわる必要がないので、効果がなかった時もテストを終了すればすぐ元に戻せます。
シングルページアプリケーションの場合
これで満足の場合も多いのだけれど、Twitter のように Ajax で記事をどんどん読み込む無限スクロールようなサイトの場合、ページの読み込み時にしかバリエーションが適応されません。なのでスクロールして読み込まれたコンテンツは今まで通り。これでは A/Bテスト になりません。
そういう場合は Ajax通信が完了した度にバリエーションを適応させることが必要。
ここでは Rails で開発してて Turbolinks も使用していると想定します。
まず 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テストが簡単に実装できるかと。
以上です。