集計を事前に済ませておくことで、分析画面のタイムアウトを解消しました
VODAは、Webサイト訪問者のページビュー、クリック、スクロールを集め、トラフィックのグラフやヒートマップで見せる分析サービスです。導入サイトが増えて既存の構成では持ちこたえられなくなったため、4人のTFTでアーキテクチャを設計し直しました。私はイベント収集、メッセージ処理、集計、ページキャプチャを担当しました。
- 5件自ら解決した収集と集計の問題
- 4つ担当して開発した構成要素
- 4人アーキテクチャ再設計TFTの人数
訪問者のマウスが長くとどまった場所をページに重ねて表示します。座標の収集と集計がこの画面のデータを作ります。サービス紹介資料に掲載された画面で、会社名は伏せています。
翻訳参考図・韓国語の原本を見る- 担当する役割
- クリック座標の収集を修正し、SQSメッセージをElasticsearchのドキュメントに変換する処理、集計結果を事前に作っておく精製器、ページ全体をキャプチャするクローラーを開発しました。
- 成果
- 端末ごとにずれていたクリック座標を正し、メッセージの欠落と重複を防ぎました。分析画面は毎回Elasticsearchで集計する代わりに、精製器があらかじめ作った結果を読むように変え、タイムアウトを解消しました。
- 1座標の収集マウスの下の最前面の要素を基準に座標を記録
- 2メッセージ処理SQSメッセージをElasticsearchのドキュメント形式に加工
- 3データ精製器定期的に集計してRDSのテーブルに保存
- 4ページクローラーフルページスクロールのサイトもページ全体をキャプチャ
旧構成と新構成
Web Agent訪問者のページビュー、クリック、スクロールを収集
voda-server収集データをMySQLに保存し、精製と画面の応答まで1台のサーバーが処理
分析画面トラフィックのグラフとヒートマップ
収集
- Web Agent訪問者のページビュー、クリック、スクロールを収集座標の記録方式を改善
- API Gateway, SQSマウスとスクロールのイベントをキューに保管
- pv-recorder, mouse-recorderメッセージをElasticsearchのドキュメントとして保存メッセージ加工、並列収集、重複除去
- page-crawlerページ画面と要素の位置を収集ページ全体のキャプチャ
ストレージ
- Elasticsearchイベントログと集計結果
- MySQL顧客企業、ページ情報、レポート
精製
- 集計精製器マウスとスクロールのデータを定期的に集計精製器を構築
- forecast訪問推移の予測
可視化
- presenter分析画面にデータを送るAPI集計結果の応答
- voda-analytics管理者向けの分析画面
この技術によって期待される変化
イベントを取りこぼさない収集
収集器を複数のコンテナに分けてキューにたまったメッセージを遅れずに取り出し、同じメッセージが2回届いても記録は1件だけ残ります。
端末に関係なく正しいヒートマップ
座標をWeb要素基準で記録するため、画面サイズが違っても同じボタンのクリックは同じ位置に集まります。
待たせない分析画面
重い集計を事前に済ませておくため、管理者は画面を開いたときにタイムアウトなしでグラフやヒートマップを確認できます。
問題と解決策
問題ページの絶対座標で記録していたため、同じボタンを押しても画面サイズによって違う位置として残りました。
解決マウスの下で最前面にあるWeb要素を探し、その要素内の座標として記録しました。
問題分析画面を開くたびにElasticsearch Aggregationで集計していたため、応答が遅れてタイムアウトが発生しました。
解決定期的に集計してRDSのテーブルに保存する精製器を新しく作り、画面は集計結果だけを読むようにしました。
問題官公庁のサイトに多かったセクション単位のフルページスクロールでは、通常のキャプチャだと最初のセクションしか撮れませんでした。
解決Selenium APIの代わりにChromeへ直接リクエストを送り、キャプチャの高さをスクロール全長まで伸ばして、モバイル方式でキャプチャしました。
問題SQSのメッセージを1分間取り出さないと、キューの上限を超えてデータが欠落しました。
解決非同期タスクキューで複数のDockerコンテナに収集コマンドを振り分け、メッセージを並列に取り出すようにしました。
問題並列に取り出すようにすると、同じメッセージを2回取得してログが重複しました。
解決メッセージの時刻とユーザーIDからドキュメントIDを作り、同じメッセージは上書きされるようにしました。
分析サービスの画面
時間帯別、曜日別の訪問推移と予測値を表示します。サービス紹介資料に掲載された画面で、会社名は伏せています。
翻訳参考図・韓国語の原本を見る