- シニアフロントエンドエンジニア
- プロダクトマネージャー
- オープン募集(募集職種多数)
- Other occupations (34)
- Development
- Business
- Other
ログラスでエンジニアをしています、よしだ(hikoy)です。
本記事は「株式会社ログラス Productチーム Advent Calendar 2022」の7日目の記事になります。
件名のままですが、プロダクト開発においてユーザのペインがどこにあるか、Datadog Real User Monitoring(以下 Datadog RUM) & セッションリプレイの情報から可視化してみた話となります。
ログラスでは複数のエンジニアチームが、それぞれ担当する機能を開発しています。
CSチームから機能要望を多くいただくのですが、その機能のペインがどれくらいかあるか?また、いただく内容以外にもペインがあるのではないかとふと疑問思いました。
私が直近担当している機能はいわゆる設定機能全般となります。そのため
- 画面の操作時間が長いと相当使いづらいものとなっている
- 画面の操作数が多いと相当使いづらいものとなっている
と仮説を立て、それらが定量的に示せれば、よりユーザのペイン解消を進められていると実感する開発体験が出来そう考えました。
そこで、Datadog RUM & セッションリプレイの情報から機能の利用状況を可視化出来るのではと思い立って作ってみました。
ダッシュボード
いきなりですが、完成形のダッシュボードはこちらです。
表示内容の説明
- 1段目
設定の機能と書きましたが、そこから更に細分化できたので、4つの画面で「各機能の操作時間/サービス全体の操作時間」の割合を表示してあります。ここに表示されている値は、最初の仮説であったように少ないほどよいところなので定期的に少なくなっているいるかを確認したいと考えています。 - 2段目
4つの画面の操作時間を時系列で表しています。注意点と改善ポイントなのですが、ある一定の幅での平均時間となっているので、単純に操作をするユーザ数が多い場合でも数値が大きくなってしまいます。 - 3段目
4つの画面の操作数(クリックなど)を時系列で表しています。こちらも同様の注意点と改善ポイントですが、ある一定の幅での平均操作数となっているので、単純に操作をするユーザ数が多い場合でも数値が大きくなってしまいます。
注意点に書いたように、まだまだ粗い部分がありますが、「まずは作ってメンバーに共有して声を聞いてみる」という精神で0から試行錯誤して1時間程度で作成しました。時系列のグラフはクリックすると「View RUM events」が表示され、そこからセッションリプレイまで見れるのは個人的に感動していました。
これを使うことでダッシュボードの計算式が合っているかのデバッグもですが、「え!?そんなに時間や操作数かかっているの!?」と思ったら実際のユーザの操作が確認できてよりユーザ理解が進みました。
チームメンバーからの声
こちらのダッシュボードをチームメンバーに共有したところ、こんなありがたい言葉がもらえたので紹介します。
導入するには?
簡単にですが、こちらのダッシュボードを作成するまでの設定の流れを書きます。
1. Datadog RUMを導入する
こちらの公式ページにインストール方法がありますのでこれに沿ってインストールします。
にするのが良いと個人的には思います。導入する際に注意すべきと感じたのはセッションリプレイのプライバシーオプションです。この設定をしておかないと画面の情報が全て見えてしまいますので、必要に応じてdefaultPrivacyLevelをmask-user-inputかmaskにするのが良いと個人的には思います。
ちなみに、インストール方法やDatadog RUMの使用感を学ぶには公式が出しているUsing Datadog RUM to Track Core Web Vitalsというコースを試してみるのがおすすめです。
2. ダッシュボードをカスタマイズする
Datadog RUMを導入しただけでこちらのRUMダッシュボードが使えるようになります。ただ、今回のダッシュボードは自分たちの担当している機能だけにフォーカスした情報が必要なので、新たに作る必要があります。今回のダッシュボードを作る際に使った項目としては下記があります。
- view.url_path
URLのパス部分が格納されます。この値から対象の画面のパスで絞り込み、画面毎の情報に出来ます。
- view.time_spent
ビューに費やした時間が格納されます。画面のパス絞り込んだ情報から対象画面毎の操作時間情報としました。
- view.action.count
ビューについて収集されたすべてのアクションの数が格納されます。こちらを対象画面の操作数情報としました。view.action.count
参考までにRUMで収集されるデータのページはこちら
おわりに
どうでしたでしょうか?ぜひ、皆さんもやってみてください。この記事をきっかけにDatadogを好きになってもらえると嬉しい限りです。私はDatadogが楽しくなりすぎて、社内にチャンネルを作ってしまっています。
アドベントカレンダー的な締め
明日「株式会社ログラス Productチーム Advent Calendar 2022」の8日目の記事はこたつさんによる記事です。お楽しみに!