Rails移行によって実現できたA/Bテストを用いた高速なサイト改善

「ふつう」のRuby on Rails ウェブサービス開発（Clipla x みんなのウェディング）
クリニカル・プラットフォーム株式会社 × 株式会社みんなのウェディング共同開催勉強会にて使われたスライド資料

presented by みんなのウェディング

Transcript

1. 株式会社みんなのウェディング 2017年5月23日 合原 慶 Rails移行後のABテストを用いたサイト改善
2. 自己紹介 • 合原　慶（aihara kei） • 入社５年目（2012.11.1〜） • 今やっていることは、サービス開発（さがすサービス部所属）
3. Today's topics • ABテストを用いたサイト改善 • What for? • What kinds of tests patten? • How to build ab testing? • 終わりに
4. background 1. 定量的な評価を盛り込んだプロダクト開発 2. Rails移行の目的の一つは、スピーディなプロダクト開発の達成 3. エンジニアも数字で語り成果を示していけるようにしていきたい
5. What is target? • エリア別式場検索ページ（通称 エリア一覧）
6. Why? 1. 式場探し初期段階のユーザーがGoogle検索による流入がある ◦ 上記から式場ページへのトラフィックが大きい 2. 上記ユーザーのフェア予約（転換）が望ましいストーリー 3. 送客ができること（フェア予約）で式場様の満足度も向上する。（というか ミッションでもある） 4. 数的にも、このページのCVR（転換率）をあげることが効率がいい
7. How long? • 2016.11 〜 2017.02 • 1パターン：1w〜10days
8. 具体的にはこんなことやりました
9. KPIの設定 • 訪問予約人数への寄与は何をもって見る？ ◦ ① CVR ▪ 訪問予約人(UB)数　/　エリア一覧UB数 ◦ ② 一式場あたりの件数ベースのCVR ▪ 訪問予約件数　/　閲覧された式場数 • 閲覧式場数 ◦ ③ 式場配下UB数　/　エリア一覧UB数
10. 各テストデザインと評価 （A：既存、B：新）
11. テスト
12. テスト１ • Aパターン上回れず • エリア一覧からフェア一覧 ページへの遷移数が減少
13. テスト２ • エリア一覧からフェア一覧 ページへの遷移数が改善 （戻った） • Aパターン上回れず。 ： • ここで作戦再考。。。
14. テスト３ • 初めて統計的に有意な差を生 む結果 • カルーセルの使用率が低い ： • カルーセル使ってくれれば、 CVR上がるのでは？
15. テスト４ • カルーセルの使用率向上 • 最重要なKPI①の数値がAパ ターンを上回る結果 ： • さらなる向上のため、再考...
16. テスト５ • ボタンの押下率は低くないが、 ①の指標は振るわない。 • そこで、fullstoryを見る限り、式 場のその他コンテンツのボタン は押下されていない) ： • クリックイベントを修正 (touchstart -> click) • 結果ほぼ押下されてい ないことが判明...
17. テスト６ • エリア一覧広告込みのバージョン状 態でも数値が変わらないことを確認
18. ab testing on Ruby on Rails • 特定の表示比率で、A/Bパ ターンのデザインの切り替 え • クライアント側での特定の イベント（クリック）計測
19. that is...
20. 1. 既存機能はそのままに 2. テストパターンの機能を動かす（表示する） 3. クライアント側での特定のイベント（クリック等）計 測 やりたいこと
21. How to build ab testing
22. How to build ab testing1
23. ※ここでA/B両パターンの表示条件の制御をする
24. image
25. Use Motorhead • A/Bパターンのテンプレートの出しわけ • 特定のアクセス（20％はA、80％はB等）への上記の適用 　＝＞　影響範囲を限定しながらテストが行える ref https://blog.mwed.info/posts/motorhead.html
26. ただし、難点もありにけり・・
27. problem1 • 既存のCSSとは切り分けて、テストデザイン用のCSSが当てられない
28. problem1 • 既存のCSSとは切り分けて、テストデザイン用のCSSが当てられない ◦ Motorheadの中にCSSも入れる ◦ CSSをviewで当て直す ▪ - = stylesheet_link_tag :shikijo_smartphone + = stylesheet_link_tag 'new_area_search/places' ◦ config/initializers/assets.rbへも追加 ▪ -Rails.application.config.assets.precompile += %w( *.js *application.css *_smartphone.css static_css_pages.css) +Rails.application.config.assets.precompile += %w( *.js *application.css *_smartphone.css static_css_pages.css new_area_search/places.css)
29. 本当にこれでいいの....？？
31. 松田さん 「とりあえずFIXME付けておきましょう」
32. problem2 • テストパターンで重複ロギングが発生 => SQLデータ抽出時に、重複データの除外
33. あえなく、motorhead利用停止...
34. ….ということで、
35. 自前でA/B切替の仕組みを用意しよう
36. A/B切替の仕組み 1. クッキーに任意の条件で特定の値を設定 ◦ 専用クラスを用意 2. 上記を参照して、controller, view内で処理を 分岐 ◦ before_actionにて、1のインスタンス変 数を用いる
37. 1.
38. class XXXXController < ApplicationController before_action :set_place, :detect_testing_xxx def index : if @testing_xxx # test pattern else # not test pattern end : end def detect_testing_xxx test = TestingXXX.new(params, request, cookies) return false unless test.available_env? return false unless test.available_device? if test.test_mode_enable? cookies[TestingXXX::COOKIE_NAME] = { value: params[:test_mode], expires: 1.year.from_now } end test.new_design_mode? end def detect_testing_xxx test = TestingFairs.new(params, request, cookies) @testing_xxx = detect_testing_xxx end end
39. 1. 既存機能はそのままに 2. テストパターンの機能を動かす（表示する） やりたいこと１（再掲）
40. • クライアント側での特定のイベント（クリッ ク等）計測 やりたいこと２（再掲）
41. みんなのウェディングデータ分析基盤 sliders.on('click', (event) => { const placeId = $(event.currentTarget).closest('.js_carousel-box').data('place-id'); activityLogger.log('area_search.slide_image_click', placeId); location.href = `/hall/${placeId}/photo/`; });
43. 定常的に見る全体数値データ
44. テスト毎に見る数値データ
45. 検定
46. How was ab testing?
47. • 最注力していた人数ベースの CVRにて、統計的に有意差あ り。 • エリア一覧からのフェア ページ遷移UB数に関して も、デザイン変更により改 善
48. 新デザインが優位に！
50. 終わりに..
51. 見えた課題 1. デグレなく、スピーディにテストをできる状態になっていない （Rails移行後のメンテができていない） 2. 誰でもすぐにABテストができる状態になっていない 3. SQLやそれを用いるツールの啓蒙 4. 統計的仮説検定など検証環境（dwhの充足）
52. 変えられたこと 1. 経験や勘だけでなく、定量的な根拠を持った良し 悪しの判断 2. データ分析基盤やRailsを活用したプロダクト開 発 3. 数値を可視化することでチーム全員が同じ指標 を見つつ、開発を進められた
53. 終わりに（所感） • エンジニアが率先して数字で成果を出して（示し て）いく • エンジニアだけが、データに触れる、分析できる のではなく、チームがそういう状態になるようにし ていく必要がある