CCIのr-ikomaです。
開発したアプリケーションをユーザーに使い続けてもらうためにはどうしたらよいでしょうか?
そこで今回は、「ユーザがストレスを感じる部分を減らせばアプリの利用継続率があがる」と仮説を起き、ストレスを検知する仕組みを作りました。
今回はDatadog のフラストレーションシグナル(Frustration Signals)という機能を利用することでユーザーストレスを検知します。
また今回はNuxt.js で開発したアプリケーションを対象に手順を記載します。
フラストレーションシグナルでは3つのイベントを追跡することができます。
導入手順
手順はモジュール導入~datadog の初期化 をやるのみです。
1.モジュール導入
package.json に下記を記載し、npm install でモジュールをダウンロードします。
※バージョンは4.14.0以上であることが必須です。
"dependencies": { "@datadog/browser-rum": "^4.14.0",
2.datadog の初期化
nuxtのプラグインディレクトリ 等を利用し、下記で初期化します。
詳細は@datadog/browser-rum - npmを参照するといいです。
import { datadogRum } from '@datadog/browser-rum' datadogRum.init({ ~~ 中略~~ trackInteractions: true, // クリックの自動収集を有効化 trackFrustrations: true // フラストレーションシグナルの有効化 })
これで準備完了です。
実践と結果確認
実際に任意画面の非アクティブであるボタンを連続クリックしてみます。
※このボタンはある条件が満たされなければアクティブにならないボタンです。
操作が完了したらDatadogの Dashboard list → RUM - Frustration Signals より、
どの画面のどの要素でユーザーストレスが発生したかを確認することができます。
こういった結果が得られた場合はボタンがアクティブになる条件をツールチップで出すなどの案内を表示すればよさそうです。(例:検索キーワードが入力されれば検索ボタンがアクティブになります。のような)
以上でユーザーが離脱する原因となる要素を素早く検知できるようになりました!
ちなみにセッションリプレイ(Session Replay )というものを活用すれば実際の操作状況を動画が確認できます。※料金が別途掛かることと使用感としてマウスポインターが実際の操作とズレたりすることもあったので、必ず導入する必要は無さそうでした。
Datadogを活用した自動ブラウザテストに関して、まとめたページもありますので、よければご覧ください。
techblog.cartaholdings.co.jp
読んでいただきありがとうございました。